使用自定义钩子更改react-hook-form输入值

Question

对于注册的输入，我无法使用自己的自定义挂钩更新它。在我的示例代码中，如下所示，尽管 r2 已正确更新，但单击按钮时 result2 并未设置为“bar”。

import { useForm } from "react-hook-form";
import { useBar } from "./useBar";

function App() {
  const { register, setValue } = useForm({
    defaultValues: { result1: "foo", result2: "foo" },
  });

  const [r2, setBar] = useBar("foo");

  const showResults = () => {
    setValue("result1", "bar");
    setBar();
    setValue("result2", r2);
  };

  return (
    <div>
      <button onClick={showResults}>Show results</button>
      <form>
        <div>
          <label>Result 1</label>
          <input type="text" {...register("result1")} />
        </div>
        <div>
          <label>Result 2</label>
          <input type="text" {...register("result2")} />
        </div>
        <div>
          <label>R 2</label>
          <input type="text" value={r2} />
        </div>
      </form>
    </div>
  );
}

export default App;

我的useBar钩子：

import { useState } from "react";

export const useBar = (initialValue = "") => {
  const [state, setState] = useState(initialValue);

  const setBar = () => {
    setState("bar");
  };

  return [state, setBar];
};

使用 setBar 更改 result2 值的正确方法是什么？请指教。

Answer 1

React 中状态更新的异步特性似乎是造成这种情况的原因。当您调用 setBar() 更新 r2 时，状态更新不会立即进行，并且在调用 setBar() 后 r2 不会立即反映“bar”的新值。因此，当您立即调用 setValue("result2", r2) 时，r2 仍然保留其先前的值（"foo"）。您可以尝试在r2更新后使用useEffect来更新“result2”的值。尝试这样的事情，

  useEffect(() => {
    setValue("result2", r2) // update result2 when r2 changes
  }, [r2, setValue])

  const showResults = () => {
    setValue("result1", "bar")
    setBar()
  }