javascript - 在reactjs状态下通过数组表示法更新嵌套对象值

Question

我有一些尝试更新特定状态的通用代码。可以通过数组中的键访问对象，例如:

let x = {person: { name: "Dennis"}} 
console.log(x["person"]["name"])

在react中，可以通过数组访问特定的状态键(并且经常用于输入验证)，例如:

//event.target.name = input field property name="firstName"
this.setState({
    [event.target.name]: event.target.value
});

这将更新this.state.firstName到输入值。

我试图将嵌套的复杂对象绑定(bind)到输入，以避免具有翻译功能。所以如果我的状态包含 { person: {name : "" } }我想通过 this.state["person"]["name"] 动态访问它 - 这是有效的。我想在 setState 中使用相同的符号，因为这样我就可以将嵌套状态数据绑定(bind)到如下输入: <input name="person.name" />在我的更改处理程序中，我可以查找句点: if(ev.target.name.split("."))...

但是，我似乎无法在 setState 中以相同的方式访问状态，因为它是一个对象，所以:

const args = ev.target.name.split(".");
this.setState({
    [args[0]][args[1]]: ev.target.value
});

有办法做到这一点吗？

Answer 1

事实证明这比最初想象的要复杂一些。通过使用 Object.assign，所有嵌套对象都保留了它们的不可变属性，这使得它们无法更改。我必须制作状态的硬拷贝才能更改它。使用lodash.set中的_set只需很少的几行即可完成:

//Create a hard-copy of the state
let stateCopy = JSON.parse(JSON.stringify(this.state));

//Update the value in the state with the input value
_set(stateCopy, ev.target.name, ev.target.value);

//Set the state with the changed value
this.setState(stateCopy);

编辑:唯一的缺点是目前我复制 setState() 中的整个状态，而不仅仅是增量值。