Javascript 反应道具意外变化

我正在使用React和React引导创建我的应用程序。我正在尝试从引导创建一个作为配置窗口的模式。它的初始数据作为道具传递，然后当前数据存储在状态中，这样我就可以选择关闭而不保存，并且可以在需要时恢复到初始数据。然而，这些道具似乎随着引导文本输入的改变而得到更新，我不知道为什么

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

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

添加

console.log（this.props.projectData）

到表单控件的

onChange

显示道具正在随更改而更新

---

为什么会这样？据我所知，没有理由更新任何道具，因为

onChange

中的唯一操作只影响组件的状态。

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

让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

而不是引用它。像这样：

让editedData={…this.state.localData}

---

在没有看到更多代码的情况下，我只能知道问题可能出在这里。

您在这里直接修改state对象：

让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

而不是引用它。像这样：

让editedData={…this.state.localData}

---

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

尝试使用destructure

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

---

用destructure试试这个

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

---

道具的projectData字段中有什么？它是否包含rootFilesystem属性？@DharaCharola是的，projectData是一个包含项目所有数据的对象，而rootFilesystem是它的一个字段。props的projectData字段中有什么？它是否包含rootFilesystem属性？@DharaCharola是的，projectData是一个包含项目所有数据的对象，rootFilesystem是它的一个字段。不幸的是，这仍然会随着道具的改变而结束……你能准备沙盒或任何工作示例吗？这将有助于通读代码和流程，并结合使用赛斯答案中建议的扩展运算符解决了问题，谢谢你们<代码>让localData={…this.state.localData}；localData.rootFilesystem=event.target.value；this.setState（{localData}）不幸的是，这仍然是随着道具的改变而结束的…你能准备沙箱或任何工作示例吗？这将有助于通读代码和流程，并结合使用赛斯答案中建议的扩展运算符解决了问题，谢谢你们<代码>让localData={…this.state.localData}；localData.rootFilesystem=event.target.value；this.setState（{localData}）这和达拉的答案相结合解决了这个问题，谢谢你们！我这样做了，但是，因为我有一个新帐户，它告诉我，在我有15个声誉之前，它不会公开出现。谢谢你的欢迎，再次感谢你的帮助！这和达拉的回答结合起来解决了这个问题，谢谢你们！我这样做了，但是，因为我有一个新帐户，它告诉我，在我有15个声誉之前，它不会公开出现。谢谢你的欢迎，再次感谢你的帮助！