1

React を react-router と react-redux で使用しています。コンポーネントがマウントされると、ディスパッチしてデータベースからデータを取得します。私の親コンポーネントにはこれがあります

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)

私の子コンポーネントは次のようになります。

 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
 ) 
 }
 })

また、親コンポーネントのリンクをクリックして TopComp を更新します。異なる params.id を受け取り、それぞれのデータをフェッチします。

4

1 に答える 1

1

接続するために関数を渡していないmapStateToPropsので、状態データにまったくアクセスしていないことに驚いています。

export default connect(mapStateToProps)(TopComp)

this.props.dataについては undefined を印刷します --> 親コンポーネントがマウントされたときにのみデータをフェッチします-これはXHRリクエストなどを行いますので、最初は子コンポーネントの this.props.data は未定義になります。まだ完成。

于 2016-03-24T07:22:10.327 に答える