react-native - エラー: 未定義のプロパティ '状態' を読み取ることができません

Question

デバッガーと画面からのエラー

IDに基づいて他の残りのアイテムを取得するためにナビゲートするために「もっと読む」ボタンをクリックすることを目的として、ローカルAPIからブログ投稿を作成しました。ただし、ナビゲーションを使用しましたが、「未定義のプロパティ '状態'を読み取れません。

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import Post from './components/Post';
import PostSingle from './components/PostSingle';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const RootStack = createStackNavigator(
  {
    PostScreen: { screen: Post},
    PostSingleScreen:{screen: PostSingle},

  }
);

const AppNavigator = createAppContainer(RootStack);
export default class App extends Component {
  constructor(props) {
    super(props);
  };
  render() {
    return (
      <View style={styles.container}>
        <AppNavigator/>
      </View>
    );
  }
}

Post.js 画面が POST に読み込まれ、そこから [続きを読む] ボタンが押されて PostSingle がトリガーされます

import React, { Component } from 'react';
import {
    ScrollView, 
    StyleSheet,
    View, 
    Text,
    InputText,
    TouchableOpacity
} from 'react-native';
import axios from 'axios';

export default class Post extends Component{
    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }
     readMore = (id) => {
         this.setState({ id: id})
         this.props.navigation.navigate('PostSingleScreen')
     } 

    componentDidMount(){
        axios.get(`http://localhost/rest_api_myblog/api/post/read.php`)
        //.then(json => console.log(json.data.data[0].id))
        .then(json => json.data.data.map(mydata =>(
            {
                title: mydata.title,
                body: mydata.body,
                author: mydata.author,
                category_name: mydata.category_name, 
                id: mydata.id 
            }
        )))
        //.then(newData => console.log(newData))
       .then(newData => this.setState({posts: newData}))
       .catch(error => alert(error))

        }

    render(){
        return (
        <View>

        <ScrollView style={styles.scrollContent}>
            <View style={styles.header}>
                <Text style={styles.headerText}>Gist Monger</Text>
            </View> 
             {   
                 this.state.posts.map((post, index) =>(
                    <View key={index} style={styles.container}>
                        <Text style={styles.display}>
                            Author:  {post.author}
                        </Text>
                        <Text style={styles.display}>
                            Category: {post.category_name}
                        </Text>
                        <Text style={styles.display}>
                            Title: {post.title}
                        </Text>
                        <Text style={{overflow:'hidden'}}>
                            Id: {post.id}
                        </Text>
                     <TouchableOpacity style={styles.buttonContainer}
                     onPress = {() => this.readMore(post.id)}
                     >
                        <Text style={styles.buttonText}>

                            Read More
                        </Text>
                     </TouchableOpacity>

                     </View> 
                 ))
             }

        </ScrollView>
            <View style={styles.footer}></View>
        </View>
        );
    }
}

PostSingle.js PostSingle は、投稿でクリックされたアイテムの ID に基づいて単一の投稿を表示することが期待されています。

import React, { Component } from 'react';
import {
    ScrollView, 
    StyleSheet,
    View, 
    Text,
    TouchableOpacity
} from 'react-native';
import axios from 'axios';

export default class Post extends Component{
    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }


    componentDidMount(){
        axios.get(`http://localhost/rest_api_myblog/api/post/read_single.php?id=${id}`)
      .then(json => json.data.data.map(mydata =>(
            {
                title: mydata.title,
                body: mydata.body,
                author: mydata.author,
                category_name: mydata.category_name, 
                body: mydata.body 
            }
        )))
       .then(newData => this.setState({posts: newData}))
       .catch(error => alert(error))

        }

    render(){
        return (
        <View>

        <ScrollView style={styles.scrollContent}>
            <View style={styles.header}>
                <Text style={styles.headerText}>Gist Monger</Text>
            </View> 
             {   
                 this.state.posts.map((post, index) =>(
                    <View key={index} style={styles.container}>
                        <Text style={styles.display}>
                            Author:  {post.author}
                        </Text>
                        <Text style={styles.display}>
                            Category: {post.category_name}
                        </Text>
                        <Text style={styles.display}>
                            Title: {post.title}
                        </Text>
                        <Text style={{overflow:'hidden'}}>
                            Body: {post.body}
                        </Text>
                     </View> 
                 ))
             }

        </ScrollView>
            <View style={styles.footer}></View>
        </View>
        );
    }
}