Question

我是React的新手，我无法弄清楚如何使用spread运算符将新元素推入定义为state的数组中。目的是获得一个包含不同数字序列的数组，代码如下：

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（）并不总是立即更新组件。有可能批量或推迟更新，直到稍后。这使得阅读this.state 在调用setState（）之后就是一个潜在的陷阱。

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

3-如果新状态值依赖于先前状态，则在this.state内使用更新程序功能而不是setState。

检查此答案：Why calling setState method doesn't mutate the state immediately?

像这样写：

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中使用spread运算符更新状态

1 个答案: