我正在 React 電子商務專案中處理一個表單。
以下是它的作業方式：當用戶填寫表單并單擊提交按鈕時，我想將表單資料發布到服務器并將用戶重定向到確認/感謝頁面。
不幸的是，當我填寫表單并單擊提交按鈕時，以下代碼以特定方式作業：
第一次點擊 - 它發送資料但“setSubmitted(true)”不起作用所以我沒有被重定向
第二次點擊 - 再次發送資料，setSubmitted 作業，我被重定向
你能告訴我如何修復代碼嗎？
let history = useHistory();
const [submitted, setSubmitted] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
fetch('http://localhost:8000/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ cart: 1 }), //dummy data
})
.then((response) => {
setSubmitted(true);
return response.json();
})
.then(() => {
if (submitted) {
return history.push('/thank-you-page');
}
});
};
return (
<form onSubmit={handleSubmit}> ... </form>
);
uj5u.com熱心網友回復：
setState是一個異步操作，會導致重新渲染。因此，您的組件在第一次單擊時執行的步驟是設定狀態并回傳 json，這意味著在第二次.then()執行（在第一次渲染時）提交的點仍然為假，當第二次渲染時您第二次單擊提交從上一次單擊設定為 true，然后它會進行歷史推送。
由于您僅使用此狀態來檢查是否推送到下一頁，因此您可以將其替換為 useRef，但我個人傾向于像這樣重新撰寫它以避免任何混淆：
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch('http://localhost:8000/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ cart: 1 }), //dummy data
});
// setSubmitted(true); // set this still if you need it elsewhere
history.push('/thank-you-page');
// return response.json(); // only return this if you need it to be used somewhere
} catch(error) {
// handleTheErrorSomehow(error)
}
};
uj5u.com熱心網友回復：
您需要if statement從第二個 then(...) 中洗掉，因為狀態更新異步運行，并且在第一次單擊它是false。當您再次單擊表單提交然后提交時，這次從您的上次操作和您重定向是正確的。
還有一個，如果您使用從第一個then(...)塊回傳的 using 資料，您也可以將它們重定向代碼并洗掉第二個。
const handleSubmit = (e) => {
e.preventDefault();
fetch('http://localhost:8000/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ cart: 1 }), //dummy data
})
.then((response) => {
setSubmitted(true);
return history.push('/thank-you-page');
});
};
希望這能解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338458.html
標籤：javascript 反应 形式 反应路由器 使用状态