的setState後使用setTimeout的反應中，以避免異步問題

Question

我經常這樣做

this.setState({ 
something: this.state.something + 1 
}) 

setTimeout(() => { this.props.somefunction(this.state.something) },100); 

這甚至是否正確？但這至少解決了我的問題。如果我不在這裏做超時somefunction這是在我的父組件中聲明將收到一個未定義的參數。我想在執行setState之前執行this.props.somefunction()？

Answer 1

不，這不是一個好的模式。異步函數應該有一個你可以使用的回調參數，並且看着docs，有一個。

使您的功能成爲setState的第二個參數。

this.setState({...},() => { 
    this.props.somefunction(this.state.something); 
} 

使用setTimeout這裏的原因是糟糕的，是因爲你正在做的機會。你在說，「我不知道這個異步操作需要多長時間，但我不希望它花費超過100毫秒，所以我要抓住機會。」但是，當然，你不知道需要多長時間。

callback參數確保該功能在異步操作完成後運行，因此您不需要交叉手指。

Answer 2

使用setTimeout在動作上執行動作完成通常是不好的做法，在Facebook的開發人員肯定會考慮到這一點。這就是爲什麼他們有一個回調方法作爲setState的第二個參數。

setState({ something: newState },() => { 
    // Run dependant actions here 
}) 

Answer 3

的official documentation建議你把你的「回調邏輯」裏componentDidUpdate()，而不是setState()秒參數。

第二個參數對setState（）是一個可選的回調函數 一次的setState完成將要執行和成分是 重新呈現。通常我們建議使用componentDidUpdate（）代替 這樣的邏輯。

下面是一個例子，如何做到這一點：

this.setState({ 
    something: this.state.something + 1 
}) 

componentDidUpdate(prevProps, prevState) { 
    if (this.state.something !== prevState.something) { 
    this.props.somefunction(this.state.something); // the state of something has changed -> execute callback function 
    } 
}