我想用 React 中的子元素更改狀態。但是，當我單擊一次時，它不會立即更新。點擊兩次，顯示正確答案。
如何更新異步？
export default function Example() {
const onClick = async () => {
console.log('a', test)
// should be 'b', but console log 'a'
}
const [test, setTest] = useState('a')
return (
<ClickExample setTest={setTest} onClick={onClick} />
)
}
export default function ClickExample() {
const next = useCallback(
(alphabet: string) => {
setTest(alphabet)
onClick()
},
[onClick, setTest],
)
return <SelectButton onClick={() => next('b')} />
}
uj5u.com熱心網友回復：
onClick您可以從回呼中接收要更新的值作為引數。它會是這樣的：
export default function Example() {
const [test, setTest] = useState('a')
const handleClick = (newValue) => {
setTest(newValue);
}
return (
<ClickExample onClick={handleClick} />
)
}
export default function ClickExample({ onClick }) {
return <SelectButton onClick={() => onClick('b')} />
}
注意：您應該避免useCallback()在不需要時使用。通過網路閱讀更多內容，但Kent C. Dodds 的這篇文章是一個好的開始。根據經驗：永遠不要使用useCallback()/useMemo()除非你真的想在需要改進之后提高性能。
uj5u.com熱心網友回復：
在第一次渲染中， 的值test等于'a'。所以當console.log執行時，它已經被捕獲'a'為test狀態的值。（見閉包和陳舊的閉包）。
解決此問題的一種方法是handleClick在父組件中創建一個函式，該函式接收新值test作為其輸入并設定狀態并使用其引數記錄新值（將在下一次渲染中更新）。
// ClickExample
const handleClick = (alphabet) => {
setTest(alphabet);
console.log('a', alphabet);
};
密碼箱
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/530703.html
標籤：反应反应钩子