[英]React Hooks useState+useEffect+event gives stale state
[英]React hooks stale state
我試圖在回調中調用setState異步,問題是當我的函數調用setState時,狀態由另一個發生的事件更新。 有沒有辦法從嵌套回調查詢當前狀態?
這是一個簡單的演示,展示了我遇到的內容:
import React, { Component, useState } from 'react';
import { render } from 'react-dom';
function App() {
const [state, setState] = useState({value: 0});
const click = async () => {
setTimeout(() => setState({value: state.value + 10}), 300);
async function apiCall(state) {
// fake it for now
return new Promise((res) => {
setTimeout(() => {
// !!!Get the latest state here!!!
res({value: state.value + 1});
}, 1000)
});
}
const newState = await apiCall(state);
setState(newState);
}
return (
<div>
Value: {state.value}
<button onClick={click}>Update</button>
</div>
);
}
render(<App />, document.getElementById('root'));
useState
具有函數更新程序形式。 您可以使用它在更新之前獲取最新的狀態值。
const [val ,setVal] = React.useState(initVal);
const obj = { str: 'Hello' };
// Merge state form —
seVal(obj);
// Function updater form —
seVal(prevState => {
// Object.assign would also work
return {...prevState, ...{ str: prevState.str + ' World' }};
});
所以你的榜樣就會變成
setTimeout(() => setState(prevState => ({value: prevState.value + 10})), 300);
參考文檔 - hooks-reference.html #functional-updates
我還更新了您的codesandbox以使其與評論一起使用。 codesandbox
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.