Reactjs 在组件React JS中将JSON作为prop传递

我有一个组件和另一个子组件，我将父组件的JSON状态变量作为prop传递给子组件，但是当我在子组件中修改JSON时，父组件的状态变量也被修改。它没有意义，因为它只发生在JSON道具上，但如果我使用字符串、数字或数组，它会工作得很好，子状态变量也会被修改。 这些是我的组成部分：

类子级扩展React.Component{
建造师（道具）{
超级（道具）
这个州={
测试2:this.props.data，
}
this.changeTextField=this.changeTextField.bind（this）
}
changeTextField（e）{
让data=this.state.test2
数据['name']=e.target.value
this.setState（{test2:data}）
}
render（）{
返回(
)
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
测试：{name:“hola”}，
编辑：错，
}
this.edit=this.edit.bind（this）
this.cancel=this.cancel.bind（this）
}
编辑（）{
this.setState（{editing:true}）
}
取消{
this.setState（{editing:false}）
}
render（）{
返回(
{（this.state.editing）？
取消者
:
{this.state.test['name']}
编辑
}
)
}
}
$（文档）.ready（函数（）{
ReactDOM.render（，document.getElementById（“app”））
})

文件

这就是JavaScript的工作原理。它们总是通过引用传递，而其他（字符串、布尔、数字，如您所提到的）则意味着它们是不可变的

关于这些问题，已经有很多令人惊讶的答案：

我们如何解决这个问题？

在您的代码片段中，当您说

data['name']=e.target.value

时，您仍然在修改state对象，这肯定是React中的不能做的事情。你可以继续读下去

您可以创建一个

test2

的副本，并选择对其进行变异：

const data = {...this.state.test2};
data['name'] = e.target.value

但是这个函数有可能会被程序调用，这将遇到错误，因为。相反，它为我们提供了一个功能版本来处理：

this.setState(prevState => ({
  test2: {
    ...prevState.test2,
    name: value,
  }
}));

完整演示：

类子级扩展React.Component{
建造师（道具）{
超级（道具）
这个州={
测试2:this.props.data，
}
this.changeTextField=this.changeTextField.bind（this）
}
changeTextField（e）{
常量值=e.target.value
this.setState（prevState=>({
测试2：{
…prevState.test2，
名称：value，
}
}))
}
render（）{
返回(
)
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
测试：{name:“hola”}，
编辑：错，
}
this.edit=this.edit.bind（this）
this.cancel=this.cancel.bind（this）
}
编辑（）{
this.setState（{editing:true}）
}
取消{
this.setState（{editing:false}）
}
render（）{
返回(
{（this.state.editing）？
取消者
:
{this.state.test['name']}
编辑
}
)
}
}
$（文档）.ready（函数（）{
ReactDOM.render（，document.getElementById（“app”））
})

文件

这就是JavaScript的工作原理。它们总是通过引用传递，而其他（字符串、布尔、数字，如您所提到的）则意味着它们是不可变的

关于这些问题，已经有很多令人惊讶的答案：

我们如何解决这个问题？

在您的代码片段中，当您说

data['name']=e.target.value

时，您仍然在修改state对象，这肯定是React中的不能做的事情。你可以继续读下去

您可以创建一个

test2

的副本，并选择对其进行变异：

const data = {...this.state.test2};
data['name'] = e.target.value

但是这个函数有可能会被程序调用，这将遇到错误，因为。相反，它为我们提供了一个功能版本来处理：

this.setState(prevState => ({
  test2: {
    ...prevState.test2,
    name: value,
  }
}));

完整演示：

类子级扩展React.Component{
建造师（道具）{
超级（道具）
这个州={
测试2:this.props.data，
}
this.changeTextField=this.changeTextField.bind（this）
}
changeTextField（e）{
常量值=e.target.value
this.setState（prevState=>({
测试2：{
…prevState.test2，
名称：value，
}
}))
}
render（）{
返回(
)
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
测试：{name:“hola”}，
编辑：错，
}
this.edit=this.edit.bind（this）
this.cancel=this.cancel.bind（this）
}
编辑（）{
this.setState（{editing:true}）
}
取消{