javascript - 变量不会同时从 React setState 改变

Question

我们有一个工作流程中的用户表，其中每个用户根据他们在工作流程中所处的步骤而具有不同的状态。为便于示例，假设从 1-4 有 4 个步骤。

每个用户在他们的表格行上都有一个按钮，单击该按钮会打开一个模式，该模式会获取他们的用户 ID 和当前步骤作为数据值。

handleClick = (event) => {
    let step = event.target.dataset.step;
    let id = event.target.dataset.id;
    this.setState({ currentStep: step, userId: id, moveUserModal: true });
}
.........
<Modal
    isOpen={this.state.moveUserModal}
>
    <UserModal step={this.state.currentStep} userId={this.state.userId} close={this.close} />
</Modal>

在模态中:

constructor(props) {
    super(props);
    console.log(this.props);
}

控制台日志为两个变量返回 undefined，为关闭返回 f()。如果 moveUserModal 为真，是否有其他变量不具有构造函数可以访问的值的原因？

Answer 1

没有什么能阻止您的 UserModal 从一开始就进行 mouting。

当你的父组件正在挂载时，你的 UserModal 也在挂载，并且已经调用了未定义的构造函数。

也许可以试试:

<Modal isOpen={this.state.moveUserModal} >
    this.state.moveUserModal && <UserModal step={this.state.currentStep} userId={this.state.userId} close={this.close} />
</Modal>