表单中的 Submit按钮在第二次点击后生效.ReactJS

Question

我正在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>
);

Answer 1

setState是一个异步动作，将导致重新渲染。所以你的组件在第一次点击时要经历的步骤是，它设置状态并返回json，这意味着在第二次.then()被执行时(在第一次渲染时)提交的仍然是false，在第二次渲染时，当你第二次点击时，提交的被设置为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)
}
};

Answer 2

你需要删除if statement从第二然后(…)作为状态更新异步运行，并在第一次点击它是false。当你再次点击表单提交，然后提交是真的，这一次从你的最后一个动作，你重定向。

还有一个，如果你正在使用从第一个then(...)块返回的使用数据，你可以把你的重定向代码也删除第二个。

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');
});
};

希望这将解决您的问题。