ReactJS - 数组中对象键的 setState

IT技术 javascript reactjs
2021-05-20 03:14:58

所以我已经研究了一段时间，觉得最好重构我的代码，以便将状态设置为一个对象数组。我想要做的是在单击按钮时增加一个数字。

我在一个组件中有一个回调函数，它触发一个函数来更新状态......但是我很难定位对象内的键值。

我的初始状态如下所示：

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
        },
      ]
    }

我正在尝试瞄准upVotes关键，但无法弄清楚如何。我的函数传递了一个键，以便我可以定位数组中的索引，但是当我尝试执行以下操作时：this.setState({items[key]: {upVotes: this.state.items[key].upVotes + 1}})由于意外的[标记，它会引发错误。

我在这里尝试了类似于这个线程的东西，但我不断收到错误。

我可以编写什么样的函数来设置我想要定位的对象中的键的状态？

2个回答

获取当前状态，修改它，setState()然后：

var stateCopy = Object.assign({}, this.state);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);

注意：这将改变状态。以下是不发生突变的方法：

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

可以直接编辑数组上的值并将状态设置为修改后的对象，考虑到您没有使用 immutable.js，即...

this.state.array[i].prop = 'newValue';
this.setState({ array: this.state.array });

直接编辑的问题在于 React 不知道状态已更改并且更新生命周期不会触发。但是再次设置状态会强制更新。

- 编辑 -

如果状态是不可变的...

const array = this.state.array.slice();
array[i].prop = 'newValue';
this.setState({ array });

-- 编辑 2 --

由于选择了答案，我意识到这仍然会改变元素，因为数组只包含对相关对象的引用。这是一个简洁的 ES6-y 方法。

const array = [...this.state.array];
array[i] = { ...array[i], prop: 'New Value' };
this.setState({ array });
其它你可能感兴趣的问题
上一篇Ultimaker 层分辨率与喷嘴尺寸 下一篇Firebase 托管 + 与 webpack react