Question

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

每个用户在其表行上都有一个按钮，单击该按钮将打开一个模式，该模式将其userId和当前步骤作为数据值。

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为true，是否存在其他var不再具有构造函数可以访问的值的原因？

Answer 1

没有什么可以阻止您的UserModal从一开始就受到影响。

当您的父组件正在安装时，您的UserModal也正在安装，并且构造函数已经使用未定义调用。

也许可以尝试以下方法：

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

变量不会同时从React setState更改

1 个答案: