时间戳

首页 > 解决方案 > React shouldComponentUpdate 检测变化

javascript - React shouldComponentUpdate 检测变化

问题描述

我必须在这里做一些愚蠢的事情，但经过一天的尝试，我正在转向这里......

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方法中，nextStateandthis.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或应该使用什么成语。

编辑：

有人建议我把回调slice中的值数组onChanged，也就是改成回调为：

  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

编辑：

Crkeys 我很笨。有一个愚蠢的返回声明受到打击。我完全错过了。我接受下面的答案，因为正如问题所述，它们是正确的。

标签： javascriptreactjs

解决方案

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

更改const val = state.val;为

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

或者

const val = state.val.slice();

创建一个新数组

推荐阅读