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

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 将未定义，因为请求没有尚未完成。