钩子不更新表单提交的状态答案

【问题标题】：Hook not updating state on form submission钩子不更新表单提交的状态
【发布时间】：2022-08-18 20:31:59
【问题描述】：

我有一个隐藏的输入字段，用于识别提交的表单类型，我的后端将使用该字段。由于这个值没有改变，我没有一个 onChange 函数来监听这个值并设置状态。相反，我遍历输入值的表单提交事件并使用钩子设置状态。但是，我相信由于钩子的异步特性，它不会在用于同一功能之前设置。有没有更好的方法来实现我想要做的事情？

import React, { useContext, useEffect, useState } from \'react\'

const SignUpForm = () => {
    const [plan, setPlan] = useState();

    const signUp = (e) => {
        e.preventDefault();
        console.log(e)

        // Returning \"starter\"
        console.log(e.target.form[0].value)

        setPlan(e.target.form[0].value)

        // Returning \"null\"
        console.log(plan)

    }

    return (
        <div className=\"signup-form\">
            <div className=\"grid min-h-screen place-items-center\">
                <div className=\"w-11/12 p-12 bg-white sm:w-8/12 md:w-1/2 lg:w-5/12\">
                    <form className=\"mt-6\" action=\"/signup/\" method=\"post\">
                        <input id=\"plan\" type=\"hidden\" name=\"plan\" value=\"starter\" required />
                        <button type=\"submit\" className=\"w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-black shadow-lg focus:outline-none hover:bg-gray-900 hover:shadow-none\" onClick={ signUp }>
                            Sign up
                        </button>
                        <a href=\"/signin/\"><p className=\"flex justify-between inline-block mt-4 text-xs text-gray-500 cursor-pointer hover:text-black\">Already registered?</p></a>
                    </form>
                </div>
            </div>
        </div>
    )
}

export default SignUpForm;

这回答了你的问题了吗？ The useState set method is not reflecting a change immediately
@David，如果我没看错，这不是由于异步性质，而是状态更新反映在下一次重新渲染时的事实。由于这个函数将包含一个需要更新状态值的获取，我应该使用另一种方法来更新状态吗？
如果你想直接在这个函数中执行一个操作，你想使用的值是e.target.form[0].value。或者，如果您想将操作分离到另一个函数中，您可以使用useEffect 来响应对plan 状态值的更改。基本上，您要么使用您现在拥有的值来执行操作，要么使用useEffect 来执行操作以响应状态更改。

标签： reactjs react-hooks

【解决方案1】：

首先大卫的回答是正确的，但如果你想知道是否有任何其他方式可以访问隐藏的输入值，那么你可以使用useRef 挂钩。这样你就可以无需单击提交按钮即可轻松访问该输入值并且您可以在任何地方访问该输入值以获取您可能拥有的任何逻辑。

示例代码：

import react, { useState , useRef } from "react";

const App = () => {
  const planRef = useRef();
  const [plan, setPlan] = useState();

  const signUp = (e) => {
    e.preventDefault();
    console.log(e);

    // Returning "starter"
    console.log(e.target.form[0].value);

    setPlan(e.target.form[0].value);

    /// accessing the
    console.log("ref value ===>", planRef.current.value);

    // Returning "null"
    console.log(plan);
  };

  return (
    <div>
      <form action="/signup/" method="post">
        <input
          ref={planRef}
          id="plan"
          type="hidden"
          name="plan"
          value="starter"
          required
        />
        <button type="submit" onClick={signUp}>
          Sign up
        </button>
      </form>
    </div>
  );
};

export default App;

【讨论】：