未在渲染中定义的道具，但在第一次安装组件时返回渲染时看到的值

Question

我将 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 并为每个参数获取数据。

Answer 1

你没有通过你的mapStateToProps 函数来连接......所以我很惊讶你甚至可以访问你的状态数据。

export default connect(mapStateToProps)(TopComp) 

至于 this.props.data 打印未定义 --> 你只在父组件挂载时获取数据 - 然后执行 XHR 请求等，所以首先子组件中的 this.props.data 将是未定义的，因为请求尚未完成。