如何使用反應正確更新陣列中的 state？

Question

在上一個問題中，我得到了關於如何更新數組的答案，這是通過以下方式實現的：

onClick(obj, index) {
  if (data.chosenBets[index]) {
    // Remove object.
    data.chosenBets.splice(index, 1);
  } else {
    // Add object.
    data.chosenBets.splice(index, 0, obj); 
  }
}

這不會在我的 UI 中觸發重新渲染。 如何在觸發重新渲染時更新數組（以與上述相同的方式）？

Answer 1

僅僅改變 state 不會觸發重新渲染。 您需要調用setState() function：

// class component
onClick = () => {
  // update state
  this.setState(newState);
}

// functional component
...
  const [ state, setState ] = useState();

  ...

  setState(newState);

此外，執行不可變的 state 更新非常重要，因為 React 通常依賴於 refs（尤其是在使用memo()或PureComponent ）。 因此，最好使用相同的項目創建新的數組實例。

onClick(obj, index) {
  let newData;
  if (data.chosenBets[index]) {
    newData = data.slice();
    newData.chosenBets.splice(index, 1);
  } else {
    newData = [ obj, ...data ]; 
  }

  setState(newData);
}

而且您總是可以使用一些庫來進行不可變更新，例如immer 、 object-path-immutable等。

Answer 2

在編寫 React 代碼時盡量避免使用不純函數。 在這里，拼接是一種不純的方法。 我建議使用以下代碼：

onClick(obj, index) {
  if (this.state.data.chosenBets[index]) {
    // Remove object.
    const data = {
        ...this.state.data,
        chosenBets: this.state.data.chosenBets.filter((cBet, i) => i !== index)
    };
    this.setState({ data });
  } else {
    // Add object.
    const data = {
        ...this.state.data,
        chosenBets: [ ...this.state.data.chosenBets, obj ]
    };
    this.setState({ data }); 
  }
}

Answer 3

我假設您已經將該數組保存在 state 中。 然后你可以做這樣的事情：

onClick = (idx) => {
  let arr = [...this.state.arrayToModify];
  arr.splice(idx,1);
  this.setState({ arrayToModify: arr });
}

希望這可以幫助！

Answer 4

我需要制作數組的副本：

let arr = appState.chosenBets
arr.splice(index, 1)
appState.chosenBets = arr

而不是簡單地做

data.chosenBets.splice(index, 1);