React Autocomplete设置默认值问题：提交时字段无有效值

我之前也碰到过一模一样的问题！核心原因是你当前的代码里，Autocomplete组件的value格式和Formik存储的字段值不匹配，再加上缺少关键的getOptionSelected属性，导致组件无法识别初始默认值为已选中状态，最终表单校验判定字段无效。

下面是具体的修复方案，一步步来：

1. 修正Autocomplete的value绑定逻辑 #

你的Formik字段values.member_status存储的是选项的id（从onChange里的setFieldValue("member_status", value !== null ? value.id : "")能看出来），但Autocomplete的value属性需要的是选项数组中的完整对象，而不是单独的id。所以我们需要从memberStatuses里找到对应id的对象作为组件的value：

value={memberStatuses?.find(status => status.id === values.member_status) || null}

2. 添加getOptionSelected属性 #

这个属性是告诉Autocomplete组件如何判断一个选项是否被选中，默认情况下组件会用对象的引用进行判断，即使两个对象内容完全一致，只要引用不同就会被认为是不同选项。加上这个属性后，组件会通过id来匹配，完美解决初始值引用不一致的问题：

getOptionSelected={(option, value) => option.id === value.id}

3. （可选）确保提交时触发touched状态 #

如果你的表单校验逻辑要求字段被触摸过才触发错误，那可以在Formik的提交函数里手动标记该字段为已触摸，或者给Formik组件加上validateOnMount属性，让组件挂载时就执行校验：

• 手动标记触摸：

onSubmit={(values, { setTouched }) => {
  setTouched({...touched, member_status: true});
  // 后续提交逻辑
}}

• 开启挂载时校验：

<Formik
  validateOnMount={true}
  // 其他配置
>
  {/* 表单内容 */}
</Formik>

修复后的完整代码 #

<Autocomplete
  name="member_status"
  // 修正value：从选项数组中匹配对应id的对象
  value={memberStatuses?.find(status => status.id === values.member_status) || null}
  options={memberStatuses ? memberStatuses : []}
  getOptionLabel={(memberStatus) => memberStatus.name}
  // 添加getOptionSelected，通过id判断选中状态
  getOptionSelected={(option, value) => option.id === value.id}
  onChange={(e, value) => {
    setFieldValue(
      "member_status",
      value !== null ? value.id : ""
    );
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Member Status"
      name="member_status"
      variant="outlined"
      onBlur={handleBlur}
      helperText={touched.member_status ? errors.member_status : ""}
      error={touched.member_status && Boolean(errors.member_status)}
    />
  )}
/>

这样修改后，Autocomplete就能正确识别初始默认值，表单提交时字段也会被判定为有效，不需要手动重新选择啦！

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