レンダリングではプロップが定義されていませんが、最初にコンポーネントがマウントされたときにレンダリングの戻り値が表示されます

Question

私はreact-routerとreact-reduxを使用しています。 コンポーネントがマウントされたときにデータベースからデータを取得するためにディスパッチを行います。それは親コンポーネントです上のリンクをクリックすると私のTopCompアップデートも

const ChildComp = React.createClass({ 
getInitialState() { 
    console.log(this.props.data) 
//empty for the first time but gets data other times 
} 
render(){ 
console.log(this.props.data) //prints undefined 
return(
    {this.props.data} //gives the data 
) 
} 
}) 

： 私の親コンポーネントは、この

const TopComp = React.createClass({ 
componentWillMount(){ 
    this.props.dispatch(getData(this.params.id)) 
}, 
render() { 
    <ChildComp data={this.props.data} /> 
} 
}) 
function mapStateToProps(state){ 
    return {data:state.data} 
} 
export default connect()(TopComp) 

私の子コンポーネントは、このようになりました。これは、異なるparams.idを受け取り、それぞれのデータをフェッチします。

Answer 1

あなたはmapStateToProps関数に接続する必要があります。あなたの状態データにアクセスすることさえ驚いています。

this.props.data印刷未定義用として

export default connect(mapStateToProps)(TopComp) 

- 親コンポーネントマウント>あなたはデータのみを取得している - これは、子コンポーネントで最初this.props.dataでXHRリクエストなどをしています要求がまだ完了していないため、未定義です。