Javascript ReactJS - 数组中对象键的 setState
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35174489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS - setState of Object key in Array
提问by Elliott McNary
So i've been working on this for awhile and felt it would be best to refactor my code so that the state is set up as an array of objects. What i'm trying to do is increment a number on a button click.
所以我已经研究了一段时间，觉得最好重构我的代码，以便将状态设置为一个对象数组。我想要做的是在单击按钮时增加一个数字。
I have a callback function in a component that triggers a function to update the state...however i'm having difficulty targeting the key value within the object.
我在一个组件中有一个回调函数，它触发一个函数来更新状态......但是我很难定位对象内的键值。
My initial state looks like this:
我的初始状态如下所示：
getInitialState: function() {
return {
items: [
{
links: 'zest',
trackId: 1023,
songTitle: 'z know the others',
artist: 'zuvet',
upVotes: 0
},
{
links: 'alpha',
trackId: 987,
songTitle: 'ass',
artist: 'arme',
upVotes: 3
},
]
}
I am trying to target the upVoteskey, but can't figure out how. My function passes a key so that I can target the index in the array, but when I try to do something like: this.setState({items[key]: {upVotes: this.state.items[key].upVotes + 1}})it throws an error due to the unexpected [token.
我正在尝试瞄准upVotes关键，但无法弄清楚如何。我的函数传递了一个键，以便我可以定位数组中的索引，但是当我尝试执行以下操作时：this.setState({items[key]: {upVotes: this.state.items[key].upVotes + 1}})由于意外的[标记，它会引发错误。
I have tried something similar to this thread here, but I keep getting errors.
我在这里尝试了类似于这个线程的东西，但我不断收到错误。
What kind of function can I write that will setState of just the key in the object that I want to target?
我可以编写什么样的函数来设置我想要定位的对象中的键的状态？
回答by Rados?aw Miernik
Get current state, modify it and setState()it:
获取当前状态，修改它和setState()它：
var stateCopy = Object.assign({}, this.state);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);
Note:This will mutate the state. Here's how to do it without mutation:
注意：这将改变状态。以下是不发生突变的方法：
var stateCopy = Object.assign({}, this.state);
stateCopy.items = stateCopy.items.slice();
stateCopy.items[key] = Object.assign({}, stateCopy.items[key]);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);
回答by Vinícius Negr?o
It's possible to directly edit the value on your array and set the state to the modified object, considering you're not using immutable.js, that is...
可以直接编辑数组上的值并将状态设置为修改后的对象，考虑到您没有使用 immutable.js，即...
this.state.array[i].prop = 'newValue';
this.setState({ array: this.state.array });
The problem with direct editing is that React doesn't know the state changed and the update lifecycle doesn't fire. But setting the state again forces an update.
直接编辑的问题在于 React 不知道状态已更改并且更新生命周期不会触发。但是再次设置状态会强制更新。
-- EDIT --
- 编辑 -
If state is Immutable...
如果状态是不可变的...
const array = this.state.array.slice();
array[i].prop = 'newValue';
this.setState({ array });
-- EDIT 2 --
-- 编辑 2 --
Thanks to the selected answer I realized this would still mutate the element since the array contains only references to the object in question. Here's a concise ES6-y way to do it.
由于选择了答案，我意识到这仍然会改变元素，因为数组只包含对相关对象的引用。这是一个简洁的 ES6-y 方法。
const array = [...this.state.array];
array[i] = { ...array[i], prop: 'New Value' };
this.setState({ array });
