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

react setState causing erratic array behaviour

本文关键字：数组 不稳定 setState react      更新时间：2023-09-26

我每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 });
}

如果I console.log(this.state.students);，它会在10秒后显示一个学生的创建。

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

但是在另一个10秒后(总共20秒)，它应该只是附加一个新创建的学生。但是它附加了一个额外的so，看起来像这样:

[Object, Object, Object]

然后计时器变得一团糟，随时随地添加新的学生。但是为什么反应状态会导致这个呢?我怎么能每10秒就增加一个学生呢?

Ps:我在渲染中调用setInterval…

render() {
    setInterval(this.getStudent, 10000);
    console.log(this.state.cards);
    return (
      <div>
        ....

render()在每次组件需要重新渲染时被调用，例如当您添加学生时。

每次render()被调用时，你启动一个新的间隔计时器，例如，每次你更新state.students时，你渲染，它启动一个新的计时器，它导致一个新的学生，这导致一个新的渲染，这导致许多新的计时器，学生，和渲染，和恶心。

你想在componentDidMount()中启动一个定时器，例如，

componentDidMount() {
  setInterval(this.getStudent, 10000);
}
render() {
  return (
    <div>
      ...

(这可能不满足您的实际需求，例如，如果您有多个组件依赖于相同的学生列表，这将是不合适的。)

不相关，但你目前通过压入state.students数组直接改变状态。这可能会因为各种各样的原因而变得不可预测的糟糕;只是在你继续前进的时候要记住一些事情。正确修改ReactJS中的状态数组

相关文章：