在 React Hook 表单中更新状态答案

【问题标题】：Updating state within React Hook Form在 React Hook 表单中更新状态
【发布时间】：2021-09-13 21:06:00
【问题描述】：

我有一个非常简单的提交表单，我正在使用 React-hook-form 来实现，我遇到了这个奇怪的问题，即我第一次提交时全局状态没有更新，但它可以工作第二次。这是我的代码：

export default function Enter() {
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const { state, dispatch } = useContext(Store)

    const onSubmit = (data) => {

        console.log('sending user: ', data.username)
        dispatch({
            type: 'SET_PLAYER',
            payload: data.username
        })
        console.log('UPDATED CLIENT STATE: ', state)
    }

    return (
    <>
        <form onSubmit={handleSubmit(onSubmit)}>
            <p>Enter your name to join lobby</p>
            <input {...register("username", { required: true })} />
            {errors.exampleRequired && <span>This field is required</span>}
            <input type="submit" />
        </form>
    </>
    );
}

这是状态似乎落后的图片，基本上：

【问题讨论】：

功能中途无法刷新状态。 React 获取函数并执行它。之后，它会刷新状态的其余部分。因此，在您的 dispatch 函数调用之后的 onSubmit 内，我不希望 state 包含您刚刚发送的新状态，因为您仍然处于同一个函数中。在同一个函数中使用data。

标签： reactjs react-hooks react-hook-form

【解决方案1】：

Dominik 的评论恰到好处。尽管状态更新是同步的，但函数刷新之间的状态更新，因此您应该使用函数内的数据，如果您需要在更新后执行某些操作，请使用 useEffect 并等待状态更改。

【讨论】：