Question

我在我的组件类中定义了一个函数，该函数调用它的父函数来处理该子函数。

completeSession(id) {
  this.props.completeSession(id);
}

此函数使用id调用父函数。父函数是：

completeSession(id) {
  console.log("Entered parent complete Session");
  console.log(id);
  this.setState({feedback_id: id});
  console.log(this.state.feedback_id);
}

在这里，您可以看到我有3个console logs，而我的console.log(id)正在给出正确的值，但this.state.feedback_id未定义。在这里，this.setState应该更新feedback_id，这也应该更新子组件。

renderPast() {

  return(
    <PastSessions timezone={this.state.timezone}
                  feedback_id={this.state.feedback_id}
                  sessions={this.state.sessions}
                  completeSession={this.completeSession.bind(this)}
                  cancelSession={this.cancelSession.bind(this)} />
  )
}

所以我将feedback id传递给组件，所以我不确定为什么它没有按预期设置状态。任何帮助将不胜感激。

Answer 1

请记住setState是异步的 - 因此调用后状态不会立即更新。您可以提供一个回调函数作为setState第二个参数，当状态实际更新时将调用该参数：

this.setState({feedback_id: id}, () => {
    console.log('state updated');
    console.log(this.state.feedback_id);
});

根据React setState文件：

...第二个参数是一个可选的回调函数   完成setState后执行并重新呈现组件。   通常我们建议使用componentDidUpdate（）来实现这种逻辑   代替。

setState（）不会立即改变this.state但会创建一个   待定状态转换。调用后访问this.state   方法可以返回现有值。

设置状态未在React中的父函数中调用

1 个答案: