想象一下你有這樣的場景
useEffect(() => {
console.log('query changed');
setSomething(1)
getStuff();
}, [props.match.params.query])
const getStuff = async () => {
console.log(something)
}
我發現在這種情況下，某些東西將始終是以前的值。因此，例如，如果您更改 props 并且某物為 2，它將呼叫 setSomething(1)，并將其放入佇列。但是，當您進入 getStuff 時，某些內容仍將是 2。您如何使其始終在呼叫下一個函式之前應用 setState 函式？
uj5u.com熱心網友回復：
您的函式 getStuff 是async您需要使用等待，將該函式包裝在另一個函式中并呼叫該函式
useEffect(() => {
console.log('query changed');
const getData=()=>{
setSomething(1)
await getStuff();
}
getData()
}, [props.match.params.query])
你看不到 useEffect 的變化，因為 useState 是async，你需要把更多的放在控制臺的底部
console.log(something)
return (
<div></div>
)
uj5u.com熱心網友回復：
問題是當你呼叫getStuff它時訪問過時的狀態值。要獲得實際的，您可以使用useCallback它創建一個與更新狀態值系結的函式。
export default function App() {
const [something, setSomething] = useState();
const [query, setQuery] = useState(0);
const getStuff = useCallback(() => {
console.log("something", something);
}, [something]);
useEffect(() => {
console.log("query changed");
setSomething(query);
getStuff();
}, [query, getStuff]);
console.log("query", query);
return (
<div className="App">
<button
onClick={() => {
setQuery(Math.random());
}}
>
Change
</button>
</div>
);
}
它能解決你的問題嗎？
你可以在這里查看https://codesandbox.io/s/naughty-lewin-rsvh5?file=/src/App.js:82-634
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/352330.html
下一篇：用戶在typeahead輸入框中輸入很長的數字很慢，onSearch無法使用react-bootstrap-typeahead版本5.2.1獲取完整的數字