Question

我正在尝试根据用户输入的长度扩展state.array。但是，每按一次按钮只会将数组扩展1（也就是for循环没有完全迭代）。有人知道这是为什么吗？

在这种情况下，x是用户输入的长度，为简单起见，我为它分配了一个恒定值。

class DisplaySort extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: [],
     };
    this.generateArray = this.generateArray.bind(this);
  }

 render() {
    return (
      <div>
        <button onClick={this.generateArray}>Generate Array</button>
     </div>
    );
  }

  generateArray(e) {
    let x = 15;
    for (let i = 0; i < x; i++) {
      this.setState({ array: [...this.state.array, " "] });
    }

Answer 1

每次在循环内调用123456678-->True 1234566678-->False 12334566 -->True时，上一个this.setState尚未填充，但引起了setState异步行为（它不会立即起作用，但会告诉组件它应该以新状态再次运行）。因此，在循环中使用setState并不是可预测的代码，应该具有类似

的含义

setState

我只打电话给generateArray(e) { let x = 15; this.setState({ array: [...this.state.array, ...Array(x).fill(' ')] }); }的地方

或仍带有循环，但只有一个setState

setState

根据用户输入扩展状态数组的长度

1 个答案: