Question

我必须在这里做些愚蠢的事情，但是经过一天的努力，我现在在这里...

对于数组val的每个元素，我都有一个下拉菜单，并保存为“ Component”状态：

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中的更改或应该使用的惯用法。

编辑：

建议我在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

编辑：

我很傻。有一个愚蠢的回报声明受到打击。我完全想念它。我接受以下答案，因为它们已正确说明问题。

Answer 1

那是因为您要对数组进行变异并重新使用。

将const val = state.val;更改为任一

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

或

const val = state.val.slice();

创建一个新数组

Answer 2

JS数组按引用传递，而不按值传递。
在执行const val = state.val;和val[index] = event.target.value;时，它会在setState之前更改状态变量。

示例：

var a = {x: [1,2,3]}
var b = a.x
b[0] = 5 // b = [5, 2, 3] and a = {x: [5,2,3]}

您可以使用slice或destructuring来解决问题。

//Slice
const val = state.val.slice()
//Destructure
const val = [...state.val]

在上面的示例中：

var a = {x: [1,2,3]}
var b = [...a.x]
var c = a.x.slice()
b[0] = 5     //b = [5, 2, 3] and a = {x: [1,2,3]}
c[0] = 6    //b = [6, 2, 3] and a = {x: [1,2,3]}

反应应shouldComponentUpdate检测到变化

2 个答案: