javascript - 循环状态并检查对象是否存在

Question

我有一些代码似乎可以工作，只是不正确。我有一个 onChange 处理程序，它向其父组件的 setState() 发送一个键和值。

_onAttributeChange(key, value) {
    const changes = this.state.changes;
    const pushObj = {key: key, value: value};
    console.log(pushObj);
    if (changes.length === 0) {
        this.setState({changes: changes.concat([pushObj])});
    } else {
        changes.forEach(change => {
            if (change.key === key) {
                console.log('Update');
            } else {
                console.log('No update');
                this.setState({changes: changes.concat([pushObj])});
            }
        });
    }
 }

您可以从这段代码中看到，我正在创建一个基于键值参数的对象，它看起来像 {key: 1, value: 'Some Value'}。如果数组的长度为 0，目标是将其连接到数组。那部分工作正常。 forEach 是我遇到问题的地方。我的目标是遍历状态数组，检查传入的 change.key 是否与数组中的键匹配，如果匹配我想执行更新，否则我想再次连接以将该更改添加到数组.

所以 2 个问题:

• 首先，当第一个更改出现时，循环正常工作，并且只会为每个具有相同键(即 1)的连续更改发送控制台日志 Update。当另一个更改出现时，它首先会正常工作并将其连接到数组，但随后任何使用 2 键的连续更改，都会触发 Update 和 else 子句的控制台日志。

• 其次，如何在不直接改变状态的情况下在遍历数组时更新更改？

Answer 1

答案应该很简单；只需处理状态的临时副本，完成后用副本替换实际状态。

_onAttributeChange(key, value) {
  let changes = this.state.changes.slice();
  const pushObj = {key: key, value: value};
  console.log(pushObj);
  if (changes.length === 0) {
    changes = changes.concat([pushObj]);
  } else {
    changes.forEach(change => {
      if (change.key === key) {
        console.log('Update');
      } else {
        console.log('No update');
        changes = changes.concat([pushObj]);
      }
    });
  }
  this.setState({changes: changes});
}

您遇到的连续更改问题很可能与 setState() 的异步性质有关。每个这样的调用不仅会导致不必要的重新渲染，而且几乎肯定会以不希望的方式更新您的状态。

看看 React 官方文档是怎么说的 setState() :

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

所以基本上，当您实际上想要循环中上一次迭代的更新状态值时，它很可能会返回“旧”状态值。

---

这里要注意的另一件非常重要的事情是，您需要创建您正在处理的状态属性的副本。否则您将直接更改状态，这可能有效，但不鼓励。

所以基本上总是这样做:

//To copy an array
let arr = this.state.myArray;  //wrong. arr still references myArray
let arr = this.state.myArray.slice();  //correct

//To copy an object
let obj = this.state.myObject;  //wrong. obj still references myObject
let obj = Object.assign({}, this.state.myObject);  //correct

有关 slice() 的 MDN 的更多信息和 Object.assign() .

此外，请谨慎使用 const。仅当变量必须不可变时才使用它。

---

TL;DR - 始终先执行所有逻辑，然后提交您的状态更改。