首页 文章

ReactJS - Array中Object键的setState

提问于
浏览 次
8

所以我一直在研究这个问题，并认为最好重构我的代码，以便将状态设置为一个对象数组 . 我想要做的是按一下按钮增加一个数字 .

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

我的初始状态如下：

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}}) 由于意外的 [ 令牌而引发错误 .

我尝试过类似于这个线程的东西here，但我一直都会遇到错误 .

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

javascript reactjs

2 回答

  • 19

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

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

    Note: 这将改变国家 . 以下是没有变异的方法：

    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);
    回复于
  • 2

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

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

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

    • 编辑 -

    如果state是Immutable ......

    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 });
    回复于

相关问题