TA貢獻(xiàn)1808條經(jīng)驗 獲得超4個贊
你那里有一個巨大的反模式。state首先，初始化inconstructor只是為了重新初始化 in是沒有意義的componentDidMount。
因此，除非componentDidMount它本身是異步的，否則你甚至都不應(yīng)該在其中使用（即使你嘗試這樣做，React 團隊的默認(rèn)配置實際上也會在他們的eslint-react-pluginsetState中引發(fā)錯誤——順便說一下，我強烈推薦你安裝，非常適合初學(xué)者幫助防止常見的反模式或常見錯誤）。
更不用說，state它本身是異步的，所以它不會在你改變它的那一刻更新。此外，我認(rèn)為您正在嘗試在這里學(xué)習(xí)，但是以防萬一此代碼用于實際生產(chǎn)，您總是可以簡單地在構(gòu)造函數(shù)中聲明它
本質(zhì)上，您的代碼可能只是
class Form extends Component {
constructor(props) {
super(props)
this.state = {
// rest of your state ...
id: 5
}
}
componentDidMount() {
const { id } = this.state
alert(id)
}
}
至于代碼本身，正如我所提到的，setState它是一個異步操作，它會立即更新狀態(tài)。要記住的一條重要規(guī)則，任何時候你設(shè)置狀態(tài)并想要使用更改的值，你應(yīng)該提供一個回調(diào)
setState定義如下setState(Function => Object | Object, callbackFunction)
所以本質(zhì)上，你想在你的代碼中做的是
this.setState(setStateFunction, () => alert(this.state.id))
TA貢獻(xiàn)1719條經(jīng)驗 獲得超6個贊
更新 React 組件的狀態(tài)是異步的。它不會立即發(fā)生。
由于setState是異步的，因此即使通過傳遞函數(shù)，也可能不會在您調(diào)用它時立即反映更改。如果要檢查值是否正在更新，可以使用setState如下結(jié)果的回調(diào)進(jìn)行檢查。
componentDidMount() {
function setStateFunction(state, props) {
const newState = {...state, id: 5};
return newState;
}
this.setState(setStateFunction, () => {
alert(this.state.id)
});
}
舉報