时间戳

首页 > 解决方案 > 反应表单提交问题

javascript - 反应表单提交问题

问题描述

我有一个包含表单的模式。每当我通过它提交数据并控制台记录它时，它都不会第一次工作。我第二次通过它提交数据，上一个条目的控制台日志。谁能确定我是否可能遗漏任何东西？

  const handleSubmit = (event) => {
    event.preventDefault();
    setOpen(false);
    setSubmission({
      ref: event.target[0].value,
      brand: event.target[1].value,
      iname: event.target[2].value,
      gtin: event.target[3].value,
      qty: 0,
    });
    console.log(submission);
  };

标签： javascriptreactjsforms

解决方案

嗯，这就是钩子的工作方式，到你的时候console.log(submission)，状态还没有改变。

这是因为当您调用 setSubmission() 时，它会让 react 知道您想要更新状态并将其放入队列中。

如果要捕获状态变化，请使用useEffect()钩子

    useEffect(() => {
        console.log(submission); // this hook captures the state change and this will have the correct value
}, [submission]);  // think of this as a dependency variable that `useEffect` will listen for changes.

推荐阅读