无法在 React 中使用扩展运算符更新状态

Question

我是 React 的新手，我只是不知道如何使用展开运算符将定义的数组中的新元素推送到状态中。目的是获取一个包含不同数字序列的数组，代码如下：

getSequence = () => {
    let n = 0;

    while ( n < 3 ) {
      let number = Math.floor(Math.random() * 10) + 1;
      let exists = this.state.sequence.indexOf(number);

      if ( exists < 0 ) {
        this.setState({
          sequence: [...this.state.sequence, number]
        });

        n++;
      }
    }
  }

该事件由onClick 事件触发，但每次点击时数组将只更新一个数字。我哪里错了？

Answer 1

变化：

1- setState is async，所以它不会像你期望的那样工作。根据 DOC：

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

2- 在循环中使用 setState 不是一个好主意，首先创建三个数字的数组，然后简单地将其合并到状态数组中。

3- 如果新的状态值依赖于先前的状态，则在 setState.

中使用更新函数而不是 this.state

检查这个答案：

这样写：

getSequence = () => {
    let n = 0, arr = [];

    while ( n < 3 ) {
        let number = Math.floor(Math.random() * 10) + 1;
        let exists = this.state.sequence.indexOf(number);

        if ( exists < 0 ) {
            arr.push(number);
            n++;
        }
    }

    this.setState(prevState => ({
        sequence: [...prevState.sequence, ...arr]
    }));
}

无法在 React 中使用扩展运算符更新状态

Cannot update state with spread operator in React

javascript

reactjs

spread-syntax

redux