反応setStateが異常な配列動作を引き起こす

Question

私は10秒ごとに関数を呼び出しています。

setInterval(this.getStudent, 10000); 

この関数内では、students配列の最新の状態を取得する必要があります。

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秒後）には、新たに作成された生徒が1人追加されます。しかし、それは余分なので、このように見えます：

[Object, Object, Object] 

そしてそこからタイマーはすべて台無しになり、望むたびに新しい生徒を追加します。しかし、なぜそれが原因で反応するのですか？ 10秒ごとに生徒を追加するにはどうすればよいですか？

シモンズ：私はそうのようにレンダリング内のsetIntervalを呼んでいる...

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

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

Answer 1

render()コンポーネントは、あなたが学生を追加するときのように再レンダリング–必要とするたびに呼ばれています。

たびrender()は、あなたが、新しいインターバルタイマーをスタート例えば、あなたがstate.studentsを更新するたびに、あなたは新しいレンダリングにつながる新しい学生を導く新しいタイマーを開始する、レンダリングし、これと呼ばれています新しいタイマー、学生、およびレンダリング、広告のnauseumの多くにつながる。

あなたが学生の同じリストに頼って複数のコンポーネントを持っている場合（これは、例えば、あなたの本当の要件を満たさない場合があり

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

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

、componentDidMount()、例えばのようなもので、単一のタイマーを開始したいと思います）これは適切ではありません。

無関係ですが、現在state.studentsアレイにプッシュすることで状態を直接変更しています。これは、さまざまな理由で予期せず悪くなることがあります。–あなたが前進していることを覚えておいてください。 Correct modification of state arrays in ReactJS