javascript - react shouldComponentUpdate 检测变化

Question

我一定是在这里做了一些愚蠢的事情，但经过一天的努力，我正在转向这里......

我为数组 val 的每个元素都有一个下拉菜单，我将其保存在组件状态中:

class C extends Component {

    state = { val : [ 1,2,3,4] }
    ...

}

每个下拉条目中的更改都会触发此回调:

  onChanged = (event, index) => {
    console.log("val changed");
    this.setState(state => {
      const val = state.val;
      val[index] = event.target.value;
      return { val: val };
    });
  };

现在的问题是我不知道如何检测 shouldComponentUpdate 中的这个变化。具体来说，当我更改其中一个下拉选项时，我看到记录了 val changed。但是，在 shouldComponentUpdate 方法中，nextState 和 this.state 始终包含相同的值(并且在比较时看起来是相同的)。所以我无法检测到 shouldComponentUpdate 的变化。这是我正在使用的确切代码:

shouldComponentUpdate(nextProps, nextState) {

    console.log(
      "shouldComponentUpdate",
      nextProps.val,
      this.state.val,
      nextState.val,
      this.state.val === nextState.val
    );
    return false;
}

在更改其中一个下拉选项之前，这会记录类似

的内容

shouldComponentUpdate, undefined, [1, 2, 3, 4], [1, 2, 3, 4], true

如果我将第一个下拉列表从 1 更改为 9，那么我会看到

shouldComponentUpdate, undefined, [9, 2, 3, 4], [9, 2, 3, 4], true

我预计在更改后我会立即看到

shouldComponentUpdate, undefined, [1, 2, 3, 4], [9, 2, 3, 4], true

请告诉我如何检测 shouldComponentUpdate 的变化或我应该使用什么习惯用法。

编辑:

有人建议我在onChanged回调中slice值数组，也就是改回调为:

  onChanged = (event, index) => {
    console.log("val changed");
    this.setState(state => {
      const val = state.val.slice();
      val[index] = event.target.value;
      return { val: val };
    });
  };

这并没有解决问题。这是更改前后的控制台日志:

shouldComponentUpdate undefined (4) [1, 2, 3, 4] (4) [1, 2, 3, 4] true
val changed
shouldComponentUpdate undefined (4) [9, 2, 3, 4] (4) [9, 2, 3, 4] true 

编辑:

天哪，我太笨了。有一个愚蠢的 return 语句被击中了。我完全错过了。我接受以下答案，因为它们是正确的，正如问题所述。

Answer 1

那是因为你正在改变数组并重新使用它。

将 const val = state.val; 更改为其中之一

const val = [...state.val];

或

const val = state.val.slice();

创建一个新数组