props未在render中定义，但在第一次安装组件的render返回中看到的值

Question

我正在使用带有React路由器和React redux的React。当组件挂载时，我会进行调度以从数据库中获取数据。我的父组件有这个

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并为每个params.id获取数据。

Answer 1

您没有传递mapStateToProps函数来连接。。。所以我很惊讶你竟然可以访问你的州数据。

export default connect(mapStateToProps)(TopComp) 

至于打印未定义的this.props.data-->，您只在父组件装载时获取数据，然后执行XHR请求等，因此最初子组件中的this.preps.data将未定义，因为请求尚未完成。