ReactとReduxを使用してWebアプリケーションを作成しています。 XMLHttpRequestを使用してREST APIからデータを配列形式で取り込むReduxアクションがあります。私はcomponentDidMountでアクションを呼び出します。なぜなら、Reactのドキュメンテーションが言っていることが一番良いからです。レンダリング機能でそれらにアクセスしようとすると、「配列[0]はコンソールに未定義のメッセージです」というメッセージが表示されます。しかし、面白いのは、JSXをarray.map()を使って返す関数を定義してもうまくいくかどうかです。それだけで私はそれらを個別にアクセスさせません。なぜ誰がそれが分かっていますか?APIから呼び出されたReactの個々の配列要素へのアクセス
コード:
import React from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {Row, Col, Grid} from 'react-bootstrap'
import {fetchData} from '../actions'
class DataContainer extends React.Component {
listData(array){
return array.map((element) => {
return(
<Col lg = {3} md = {4} sm = {6} key = {element.id}>
<h3>{element.name}</h3>
<p>{element.description}</p>
</Col>
);
});
}
componentDidMount(){
this.props.getData() //call API
}
render() {
return(
<Grid>
<Row componentClass = "section" id = "non-profits">
{listData(props.data)} //this works
{props.data[0].name} //this doesn't work
</Row>
</Grid>
);
}
}
function mapStateToProps(state){
return{ //maps reducer state to props for use in component
data: state.data //state.data stores the data from the REST API
};
}
function mapDispatchToProps(dispatch){
return bindActionCreators({getdata: fetchdata}, dispatch)//fetchData is the redux action that
//calls the REST API
}
export default connect(mapStateToProps, mapDispatchToProps)(DataContainer);
最初の「データ」状態はどうなっていますか? – azium
初めてコンポーネントをマウントすると、データは存在しません。 Javascriptは非同期で、コンポーネントをマウントします(これは "DID MOUNT"コールバックです)。あなたはそれが設定される前に小道具を見ようとしています。レンダーfn –
でそのケースを処理する必要がありますが、データが存在しない場合、array.mapはなぜ機能しますか?データが存在しない場合、リスト関数に渡すと定義されていないはずです。初期のデータ状態は空の配列になっています – user2757964