const Hello = () => {
const [v, setV] = React.useState(1);
React.useEffect(() => {
setTimeout(async () => {
await setV(2);
doSomethingWithData(v)
}, 3000)
}, []);
return (
<div>
<h1>Hello, world {v}!</h1>
</div>
);
}
const doSomethingWithData = (v) => {
//report e-commerce data to our server here..
console.log('Variable value is: ' v);
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
doSomethingWithData(v)正在使用錯誤的變數值呼叫函式V。這是有問題的，因為在doSomethingWithData()呼叫時會在我們的電子商務資料庫中創建一條記錄，因此我們可能會根據錯誤資料做出選擇。有人可以解釋一下嗎？
uj5u.com熱心網友回復：
以下內容不符合您的預期。setV是異步的，但它不會回傳等待的承諾。
async () => {
await setV(2);
doSomethingWithData(v);
};
一般模式是使用useEffect帶有依賴值的鉤子，這是v你的情況。
React.useEffect(() => {
setTimeout(() => {
setV(2);
}, 3000);
}, []);
React.useEffect(() => {
doSomethingWithData(v);
}, [v]);
uj5u.com熱心網友回復：
如果您有可用的資料，只需將其傳遞給 doSomethingWithData。
React.useEffect(() => {
setV(2);
doSomethingWithData(2)
}, []);
該視圖將顯示來自狀態 v 的資料，并且 doSomethingWithData 不會是一個狀態。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/383863.html
標籤：javascript 反应