React+TypeScript Todo应用中Formik表单出现「非受控输入转为受控输入」警告的解决方案求助

嘿，我一眼就看出问题所在了——这个警告的核心原因是表单字段和你的initialValues配置不匹配，导致Formik初始化时某个字段的值是undefined，当你输入内容后它突然变成了有值的状态，触发了React的受控/非受控切换警告。

咱们一步步来修复：

1. 修正字段名不匹配的问题 #

你定义的createTodoModel里的字段是todo，但在TodoForm里犯了两个字段名不匹配的错误：

• 给TextField传的是field='name'
• validationSchema验证的也是name字段

但你的initialValues（也就是props.model）里根本没有name这个属性，只有todo和isComplete。这就导致Formik初始化时name字段的值是undefined，输入时突然变成字符串，直接触发了警告。

修改这两处：

export const TodoForm = (props: TodoFormProps) => {
  return(
    <Formik
      initialValues={props.model}
      onSubmit={props.onSubmit}
      validationSchema={yup.object({
        // 把name改成todo，对应model里的字段
        todo: yup.string().max(50, 'max length is 50 characters').required('You must add a todo').firstLetterUpperCase()
      })}
    >
      {(FormikProps) => (
        <Form>
          {/* 把field='name'改成field='todo'，和model字段对应 */}
          <TextField field='todo' displayName='What do you need done?' />
          <Button children='Add your todo' className='btn btn-outline-primary' disabled={FormikProps.isSubmitting} />
        </Form>
      )}
    </Formik>
  )
}

2. 确保initialValues覆盖所有表单字段 #

记住Formik的一个核心原则：所有在表单中使用的字段，必须在initialValues里有明确的初始值（不能是undefined）。

你现在TodoView里传递的model={{todo: "", isComplete: false}}已经满足要求——todo有初始空字符串，isComplete有初始布尔值，后续如果要给isComplete加表单控件，也能直接复用这个初始值，不会再触发类似警告。

额外小提示 #

注意你的firstLetterUpperCase()是自定义的Yup验证规则，确保它已经正确注册到Yup的原型上了，不然可能会引发其他错误，但这不是当前警告的诱因。

做完这些修改后，那个受控/非受控的警告应该就彻底消失了。

内容的提问来源于stack exchange，提问作者Joro