Reactjs 传递给子组件的父组件的状态未定义

在父组件中，我有一个发出GET请求的函数。我将响应JSON存储在父组件的状态中，并将状态传递给子组件，然后子组件以特定格式呈现响应（在这种情况下，它填充一个表）

这是父组件的代码：-

ParentComponent { 
   sendGETRequest() {
    /* Fetch API code */
    .then(response => response.json())
    .then(response => {
            this.setState({
                    personData: response
            });
            console.log(this.state.personData); //loads late 
    });
   }

   render() {
      return(
      <Link to="/PersonData/ViewPerson">
      <input onClick={this.sendGETRequest} />

      <Route
            path="/PersonData/ViewPerson"
            render={() => <ViewPersonTable pData={this.state.personData} />}
      />
    );
   }
}

ChildComponent{
    render(){
       console.log(this.props.pData); //This loads before the console.log in parent and is undefined 
       return(
       );
     }
 }

---

我的问题是，据我所知，setState发生在子组件已经呈现之后，因此我传递给子组件的状态是“未定义的”。如何修复此问题？

您可以使用条件渲染

  <Route
        path="/PersonData/ViewPerson"
        render={() => this.state.personData ? <ViewPersonTable pData={this.state.personData} /> : null}
  />

this.state.personData？：空}
/>

您可能必须将初始状态设置为

personData

或仅当

personData

可用时才渲染子级。@Panther当我在父组件中打印状态时，它会工作。当我将状态传递给子组件并尝试在那里打印它时，我想我得到了“未定义”，您已经忘记了

setState

是

async

。调用

setState

时，无法保证立即

控制台.log

会显示新状态。可以使用setstate中的回调来查看是否需要SOA，因为fetch调用是异步的，如果路由匹配，子组件将进行渲染。因此，您的子组件将在提取完成之前呈现，因此您将收到子组件中未定义的内容。但是，如果您根据获取的完成情况有条件地呈现组件，那么您将得到预期的答案。