ReactJS - Array中Object鍵的setState

Question

所以我一直在研究這個問題，並認為最好重構我的代碼，以便將狀態設置為一個對象數組。 我想要做的是按一下按鈕增加一個數字。

我在一個組件中有一個回調函數，它觸發一個函數來更新狀態......但是我很難在對象中定位鍵值。

我的初始狀態如下：

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}})由於意外的[令牌this.setState({items[key]: {upVotes: this.state.items[key].upVotes + 1}})它會引發錯誤。

我在這里嘗試了類似於這個線程的東西 ，但我一直在收到錯誤。

我可以編寫什么樣的函數來設置我想要定位的對象中的鍵的State？

Answer 1

獲取當前狀態，修改它並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);

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