当我通过一个已定义的状态时，为什么我的道具未定义？

Question

我正在尝试将数据传递给子组件，并且我一直在获取未定义的道具。我认为在我在父组件中设置状态时可能存在问题。我应该不使用componentWillMount吗？

provide

Answer 1

问题是您的承诺可能会在componentWillMount完成并且render被调用之前返回。所以products还不存在。你可以这样做：

render() {
  if (this.state.winks) {
    return (<Winks products={this.state.winks} />)
  } else {
    return (<div>No Winks yet</div>);
  }
}

Answer 2

问题是你没有winks的初始状态因为你依赖ajax调用来设置winks的状态，所以ajax调用将异步发生，然后它会在api调用之前执行render函数完成导致this.state.winks最初未定义。

你可以做这样的事情

render() {
  let content = this.state.winks ? <Winks products={this.state.winks} /> : <div/>
  return <div> {content} </div>