使用useState设置Formik表单输入值异常问题求助

我用Formik搭建预约系统的周排班表单，单选按钮选择空闲时段时能获取到时间数据，但拿不到对应日期。于是新增了一个输入框，用useState维护day状态，点击单选按钮时设置day的值，可提交表单时拿到的始终是day的初始值。有意思的是，如果手动在输入框中输入内容，提交时会返回期望的值加上最后按下的按键；完全不操作的话，就只返回初始值。

表单初始值代码 #

const [day, setDay] = useState("Gün");

<Formik
    onSubmit={handleFormSubmit}
    initialValues={{
    firstname: "",
    lastname: "",
    email: "",
    date: "",
    day: day,
    }}
>

设置状态的单选按钮代码 #

<Field
    type="radio"
    name="date"
    value={x.monPm3Time}
    onClick={() => {
        setDay("Pazartesi");
    }}
/>

绑定状态的输入框代码 #

<Field
    id="day"
    name="day"
    value = {day}
/>

提交函数代码 #

const handleFormSubmit = async (values) => {
        console.log(values);
        // fetch("http://localhost:5000/api/appointment", {
        //  method: "POST",
        //  body: values,
        //  headers: {
        //      Authorization: "Bearer " + token,
        //  },
        // })
        //  .then((res) => {
        //      console.log(res.status);
        //  })
        //  .catch((err) => {
        //      console.log(err);
        //  });
}

问题原因及解决办法 #

问题根源是你把Formik内部状态和自定义useState状态混用了。Formik有自己的状态管理机制，你手动给Field绑定外部useState的day值，但Formik并没有同步这个变化，提交时依然使用初始加载时的day值。

正确做法：完全交由Formik管理状态 #

1. 移除外部的useState，把day字段完全交给Formik维护
2. 点击单选按钮时，使用Formik提供的setFieldValue方法更新day字段，而非自定义的setDay

修改后的代码示例：

调整Formik初始值并使用内置方法更新状态

<Formik
    onSubmit={handleFormSubmit}
    initialValues={{
    firstname: "",
    lastname: "",
    email: "",
    date: "",
    day: "Gün", // 直接写入初始值，无需外部state
    }}
>
    {({ setFieldValue }) => ( // 解构Formik的setFieldValue方法
        <>
            <Field
                type="radio"
                name="date"
                value={x.monPm3Time}
                onClick={() => {
                    setFieldValue("day", "Pazartesi"); // 用Formik方法更新day字段
                }}
            />

            <Field
                id="day"
                name="day"
                // 无需手动绑定value，Formik自动同步内部状态
            />
        </>
    )}
</Formik>

提交函数无需修改，直接获取正确值

const handleFormSubmit = async (values) => {
    console.log(values.day); // 现在能拿到选择后的正确日期值
    // 后续请求逻辑保持不变
}

手动输入出现异常的原因 #

手动输入时，Formik内部状态会更新输入的字符，但你同时把value绑定了外部useState的day，导致两个状态冲突，最终出现"期望的值+最后按键"的矛盾结果——本质是Formik和外部useState的状态没有同步。

内容的提问来源于stack exchange，提问作者M. Selim Yaman