如何向数组状态添加值？

Question

我正在尝试向状态数组添加一个新值，但它给了我错误。

代码

async shouldComponentUpdate(prevProps) {
    if (prevProps.navigation.state.params.updated) {
      const { updated } = prevProps.navigation.state.params;
      // updated = object
      const { typeTwo, typeThree } = this.state;
      const typeTwoUpdated = await typeTwo.filter((v) => v.id !== updated.id);
      const typeThreeUpdated = await typeThree.push(updated);
      this.setState({ typeTwo: typeTwoUpdated, typeThree: typeThreeUpdated });
    }
  }

错误

> [Unhandled promise rejection: TypeError: typeThree.push is not a function. (In 'typeThree.push(updated)', 'typeThree.push' is undefined)]

编辑

修改了代码。

async shouldComponentUpdate(prevProps) {
    if (prevProps.navigation.state.params.updated) {
      const { updated } = prevProps.navigation.state.params;
      // updated = object
      const { typeTwo, typeThree } = this.state;
      // typeThree = []
      const typeTwoUpdated = typeTwo.filter((v) => v.id !== updated.id);
      this.setState({ typeTwo: typeTwoUpdated, typeThree: [...typeThree, updated] });
    }
  }

新错误

[未处理的承诺拒绝：错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。]

Answer 1

检查初始状态，特别是 state.typeThree。 shouldComponentUpdate 可以在调用 this.setState({typeThree: Array}) 之前运行

编辑：请不要将项目添加到 React 组件状态中引用的数组中。
const typeThreeUpdated = typeThree && typeThree.length ? [...typeThree] : [];

typeThreeUpdated.push(updated);

this.setState({ typeTwo: typeTwoUpdated, typeThree: typeThreeUpdated });

编辑 2：这就是发生的事情

const typeThreeUpdated = await typeThree.push(updated);

这一行将导致 typeThreeUpdated 为一个整数值，即推入一个新元素后 typeThree 的新长度。 push 改变数组但不返回新数组，而是返回新长度。然后它在这一行中以typeThree的状态存储

this.setState({ typeTwo: typeTwoUpdated, typeThree: typeThreeUpdated });

并且在下次函数运行时，this.state.typeThree还是那个数字，没有push功能。

注意这里不需要await

Answer 2

试试这个

async shouldComponentUpdate(prevProps) {
    if (prevProps.navigation.state.params.updated) {
      const { updated } = prevProps.navigation.state.params;
      // updated = object
      const { typeTwo, typeThree } = this.state;
      // typeThree = []
      const typeTwoUpdated = typeTwo.filter((v) => v.id !== updated.id);
      this.setState({ typeTwo: typeTwoUpdated, typeThree: [...typeThree, updated });
    }
  }

Answer 3

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

首先Array.prototype.push是同步操作，不需要等待。

其次，它在调用时返回数组的length，并对底层数组进行变异。

例子

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

你有两种方法：

变异

      typeThree.push(updated);
      this.setState({ typeTwo: typeTwo.filter((v) => v.id !== updated.id), typeThree });

不可变（正确的方式）

      this.setState({ typeTwo: typeTwo.filter((v) => v.id !== updated.id), typeThree: [...typeThree, updated] });