にアクセスできません:私はにconsole.logを介してアクセスするとが反応:私はこのような私のコンポーネントの状態プロパティとして配列、持っている状態での配列のインデックス(指数未定義)
this.state = { postData: [{id: 1, author: 'Mary'}, {id:2, author: 'John'}] }
を私は、要素の内容として出力にそれをしようとすると、this.state.postData[0]
など、それは、このようにオブジェクトの内容を示し、正しく
に動作します。しかし:
<p>{this.state.postData[0].author}</p>
this.state.postData[0]
は定義されていません。私は今のところ、なぜそれが起こったのかを知ることができませんでしたが、Reactの配列にアクセスする特別な方法がありますか?
EDIT:追加情報とコンテキスト状態の
初期化:
constructor() {
super();
this.state = { postData: '', end : '' };
this.loadPosts = this.loadPosts.bind(this);
}
私はAJAX、jQueryのを使用して、データをロードしています、これはポストの情報を含む配列の構造は次のとおりです。 (index.js)
app.get('/requestPost/12', (req, res) => {
var jsonPosts = { posts: [ {id:1, author: 'Mary', content: 'Hello, I am Mary'} ] };
res.send(jsonPosts);
});
そして
それが受信されるとpostData
状態が今含ま配列。
loadPosts() {
$.get('/requestPost/12').success((data) => {
this.setState({postData : data.posts });
});
}
componentWillMount() {
this.loadPosts();
}
機能をレンダリングします。私は、コンソールとしてthis.state.postData[0]
を表示しても、それを要素として出力せずに表示することに気付きました。しかし、出力として使用しようとすると、<p>{this.state.postData[0].author}</p>
のように、コンソールでの動作も停止します。また、それは私がコンソールにPOSTDATAのプロパティを表示しようとすると、console.log(this.state.postData[0].author)
render() {
console.log(this.state.postData[0]);
return (
<div>
<h1>This is the blog we all like</h1>
<p>{this.state.postData[0].id}</p>
<p>{this.state.postData[0].author}</p>
<p>{this.state.postData[0].content}</p>
<hr/>
</div>
);
}
のようにあなたは、初期状態を変更する必要がありますあなたの