反应道具意外变化

Question

我正在使用 React 和 React Bootstrap 来创建我的应用程序。我正在尝试从引导程序创建一个充当配置窗口的模态。它的初始数据作为 prop 向下传递，然后当前数据存储在状态中，以便我可以选择关闭而不保存，并且可以在需要时恢复到初始数据。但是，道具似乎在更改 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表明道具正在根据更改进行更新。

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

Answer 1

您在此处直接修改状态对象：

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}); }}