ComponentDidUpdate 將 prevState 和 this.state 等同對待

Question

我有我的 state，我用這個 function 更新了它：

  doChangeValue(data) {
    const dataNew = this.state.data
    dataNew[data.id] = data.value
    this.setState({ ...dataNew, [dataNew[data.id]]: data.value})
  }

起初看起來像這樣，但據我所知這是一種變異的方式，所以我用上面的版本改變了它：

  const dataNew = this.state.data
  dataNew[data.id] = data.value
  this.setState({ data: dataNew })

我有我的 ComponentDidUpdate：

  componentDidUpdate(prevProps, prevState) {

    const prev = prevState.data
    const curr = this.state.data
    const isStateChanged = isEqual(prev, curr)

    console.log(isStateChanged);
  }

我的問題是我的兩個變量prev和curr始終相等， isStateChanged - 始終返回true ，即使我更改了 state。

我在谷歌上搜索了一下，問題似乎是我引用了相同的 object bc 我的 function 我更改 state 的地方可能正在變異它。 但是現在我使用的傳播運算符應該不會改變 state。那么我在這里做錯了什么？

Answer 1

問題中的 doChangeValue 仍在變異 state。我使用了 Object.assign 並解決了問題。 現在，每當我在 state 中更改 smthg 時，它都會顯示 prevState 和當前狀態之間的區別：

    const newState = Object.assign({}, this.state.data)
    newState[data.id] = data.value
    this.setState({data: newState })