时间戳

首页 > 解决方案 > 表单中的提交按钮在第二次单击后起作用。反应JS

javascript - 表单中的提交按钮在第二次单击后起作用。反应JS

问题描述

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

标签： javascriptreactjsformsreact-routeruse-state

解决方案

您需要if statement从第二个 then(...) 中删除，因为状态更新是异步运行的，并且第一次单击它是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');
  });
};

希望这能解决您的问题。

推荐阅读