javascript - react setState 导致不稳定的数组行为

Question

我每 10 秒调用一次函数。

setInterval(this.getStudent, 10000);

在该函数中，它应该获取学生数组的最新状态。

getStudent() {
   const initialArr = this.state.students;
   const student = createStudent(); // this function works
                                     // it just returns a student object
   initialArr.push(student);
   this.setState({ students: initialArr });
}

如果我 console.log(this.state.students); 它会在 10 秒后显示学生的创建就好了。

Object // After 10 seconds perfect!
   name: Liam Smith
   major: BIO
   ...

但又过了 10 秒(总共 20 秒)，它应该再追加一个新创建的学生。但它附加了一个额外的所以看起来像这样:

[Object, Object, Object]

然后从那里开始，计时器变得一团糟，并在需要时添加新学生。但是为什么 react 状态会导致这种情况呢？我怎样才能简单地每 10 秒添加一个学生？

Ps: 我在 render 中调用 setInterval 就像这样......

render() {
    setInterval(this.getStudent, 10000);

    console.log(this.state.cards);
    return (
      <div>
        ....

Answer 1

render() 每次组件需要重新渲染时都会被调用——就像添加学生时一样。

每次调用 render() 时，您都会启动一个新间隔计时器，例如，每次更新 state.students 时，您都会渲染，这会启动一个新的计时器，这会导致一个新的学生，这会导致一个新的渲染，这会导致许多新的计时器、学生和渲染，令人作呕。

你想在类似 componentDidMount() 的东西中启动一个计时器，例如，

componentDidMount() {
  setInterval(this.getStudent, 10000);
}

render() {
  return (
    <div>
      ...

(这可能无法满足您的实际需求，例如，如果您有多个组件依赖于同一个学生列表，那么这就不合适了。)

不相关，但您目前正在通过推送到 state.students 数组来直接改变状态。由于各种原因，这可能会变得不可预测地糟糕——只是在您前进时要记住的事情。 Correct modification of state arrays in ReactJS