Question

我认为我发现了一个反应错误？我有2个函数来显示我的模态，首先我有一个这样的模态：

    state = {
        modal: {
            requestPopUp: {
                visible: false,
            },
        },
    };

和2个隐藏/显示功能

// Helper Methods
    handleOpenModal = name => {
        const modal = { ...this.state.modal };
        modal[name].visible = true;
        this.setState({ modal });
    };

    handleCloseModal = name => {
        const modal = { ...this.state.modal };
        modal[name].visible = false;
        this.setState({ modal });
    };

handleOpenModal可以正常工作，但是handleCloseModal不能正常运行，但不会改变状态。

modal[name].visible = false;这行代码没有任何作用，我在其后登录（模态，名称），它保持true而不是false，我该如何解决呢？

编辑：我在这里调用函数： <div className="card request p-3" onClick={() => this.handleOpenModal("requestPopUp")}> 哪个效果很好

在这里 <Modal show={modal.requestPopUp.visible} onHide={() => this.handleCloseModal("requestPopUp")}> 也可以正确调用该函数，但是根据函数逻辑，永远不要将其设置为false。

我的反应版本是“反应”：“ ^ 16.12.0”

Answer 1

请尝试避免直接更改对象props，例如（obj[prop] = value），因为它具有antI-pattern ...在下面的示例中使用解构函数：

换句话说，无需编写两次代码，您可以重用相同的函数，并传递一个额外的参数来定义是否要关闭/打开：

handleModalClick = (name, visible) => {
 this.setState({
    modal: {
      ...this.state.modal,
      [name]: {...this.state.modal[name], visible }
    }
 })
}

反应对象属性设置已损坏

1 个答案: