react setState導致不穩定的數組行爲

我每10秒調用一次函數。react setState導致不穩定的數組行爲

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> 
     ....

來源

2016-08-18 Modelesq

從哪裏調用'setInterval'？這聽起來像是你在不適當的生命週期方法中調用它，因此你有多個同時運行的時間間隔。 –

我叫它內渲染（）@DaveNewton更新後 – Modelesq

render()被稱爲每個組件需要重新渲染–當你添加一個學生喜歡的時間。

每次render()是叫你開始新間隔定時器，例如，每次更新state.students，你的渲染時間，這將啓動一個新的計時器，這將導致一個新的學生，這將導致新的渲染，這導致了很多新的計時器，學生和渲染，令人厭惡。

你會想開始在像componentDidMount()一個計時器，例如，

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

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

（這可能不符合你的實際需要，例如，如果您有多個部件依靠學生的同一名單上，這是不恰當的。）

無關，但你現在直接推到state.students陣列改變狀態。這可能會因爲各種原因而變得難以預測，因爲您需要繼續前進。 Correct modification of state arrays in ReactJS

來源

2016-08-18 18:21:41

這個伎倆！非常感謝。 – Modelesq

react setState導致不穩定的數組行爲

回答

相關問題