React Props 意外更改

Question

我正在使用 React 和 React Bootstrap 创建我的应用程序。 我正在尝试从 Bootstrap 创建一个作为配置 window 的模态。 它的初始数据作为道具传递下来，然后当前数据存储在 state 中，以便我可以选择关闭而不保存，并且可以在需要时恢复为初始数据。 但是，道具似乎会随着 Bootstrap 文本输入的变化而更新，我不知道为什么。

这是我的输入控件的代码：

<Form.Control type="text" value={this.state.localData.rootFilesystem}
                                                  onChange={(event) => {
                                                      let editedData = this.state.localData;
                                                      editedData.rootFilesystem = event.target.value;
                                                      this.setState(editedData);
                                                  }} />

localData最初在构造函数中填充为

this.state = { localData: this.props.projectData }

添加一个console.log(this.props.projectData); 表单控件的onChange显示道具正在随着更改而更新。

为什么会这样？ 据我所知，没有理由更新任何道具，因为onChange中的唯一操作仅影响组件的 state。

Answer 1

您在这里直接修改 state object：

let editedData = this.state.localData;
editedData.rootFilesystem = event.target.value;

考虑到您在编写this.state = { localData: this.props.projectData }时将this.state.localData设置为等于this.props.projectData ，并且两者都包含rootFilesystem属性，可能存在一些干扰。

尝试复制this.state.localData而不是引用它。 像这样：

let editedData = {...this.state.localData}

在没有看到更多代码的情况下，这是我唯一能说的可能是问题所在。

Answer 2

用解构试试这个

onChange={(event) => {
    let {localData} = this.state;
    localData.rootFilesystem = event.target.value;
    this.setState({localData}); }}