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]

然后从那里计时器变得混乱并随时添加新学生。但为什么反应状态导致这种情况？我怎样才能简单地每10秒钟添加一名学生？

Ps：我在渲染中调用setInterval就像这样......

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

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

Answer 1

每次添加学生时组件需要重新渲染时都会调用

render()。

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

您希望以componentDidMount()之类的方式启动单个计时器，例如，

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

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

（这可能无法满足您的实际要求，例如，如果您有多个组件依赖于相同的学生列表，这将不合适。）

无关，但您目前通过推送到state.students数组直接改变状态。由于各种原因，这可能会出现不可预测的不良后果 - 当您向前迈进时，请记住这一点。 Correct modification of state arrays in ReactJS

使setState导致不稳定的数组行为

1 个答案: