反应setState导致不稳定的数组行为

Question

I'm calling my function every 10 seconds.

setInterval(this.getStudent, 10000);

Within the function it should grab the latest state of the students array.

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

If I console.log(this.state.students); it shows the creation of a student after 10 seconds just fine.

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

But after another 10 seconds (20 seconds total) it should just append one more newly created student. But it attaches an extra so looks like this:

[Object, Object, Object]

And then from there the timer gets all messed up and adds new students whenever it wants. But why is a react state causing this? How can I just simply add a student every 10 seconds?

Ps: I'm calling setInterval within render like so...

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

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

Answer 1

render() is called every time the component needs to re-render–like when you add a student.

Each time render() is called you start a new interval timer, eg, each time you update state.students , you render, which starts a new timer, which leads to a new student, which leads to a new render, which leads to a lot of new timers, students, and renders, ad nauseum.

You'd want to start a single timer in something like componentDidMount() , eg,

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

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

(This may not satisfy your real requirements, eg, if you have multiple components relying on the same list of students, this wouldn't be appropriate.)

Unrelated, but you're currently directly altering state by pushing onto the state.students array. This can go unpredictably bad for a variety of reasons–just something to keep in mind as you're moving forward. Correct modification of state arrays in ReactJS