表单中的提交按钮在第二次点击后起作用。 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

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

希望这能解决您的问题。

Answer 2

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