React-hook-form中MUI Autocomplete为何始终设值为0而非选中对象？

你的问题出在Autocomplete与Formik结合时，没有正确配置对象类型选项的选中逻辑和值绑定，导致提交时拿到的是选项索引而非实际对象。以下是具体解决步骤：

关键修改点 #

• 配置getOptionSelected属性：因为选项是对象（引用类型），需要明确告诉Autocomplete如何判断某个选项是否为当前选中值，不能依赖默认的引用对比。
• 正确处理onChange回调：直接将选中的对象传递给Formik的setFieldValue，确保字段值为选中的对象而非索引。
• 设置正确的初始值：Formik的初始字段值要设为null或undefined，而非默认的数值类型。

修改后的代码示例 #

import { Formik, Form, Field } from "formik";
import { Autocomplete, TextField } from "@mui/material";

const options = [
  { _id: 1, name: "Option 1" },
  { _id: 2, name: "Option 2" },
  { _id: 3, name: "Option 3" }
];

export default function App() {
  return (
    <div className="App">
      <Formik
        initialValues={{ selectedOption: null }} // 初始值设为null
        onSubmit={(values) => {
          console.log(values.selectedOption); // 现在会输出选中的对象
        }}
      >
        {(formik) => (
          <Form>
            <Autocomplete
              options={options}
              getOptionLabel={(option) => option.name}
              // 用_id判断选项是否选中
              getOptionSelected={(option, value) => option._id === value._id}
              // 将选中的对象直接设置到字段
              onChange={(event, newValue) => {
                formik.setFieldValue("selectedOption", newValue);
              }}
              value={formik.values.selectedOption}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Select Option"
                  variant="outlined"
                  fullWidth
                />
              )}
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

解释 #

1. getOptionSelected：通过_id这个唯一标识对比选项和当前值，确保Autocomplete能正确识别选中状态，避免因对象引用不同导致的判断错误。
2. onChange：当选中选项时，newValue就是选中的对象，直接把它赋值给Formik的字段，这样提交时字段值就是目标对象。
3. 初始值null：保证初始状态没有选中项，选中后字段值才会变为对应的对象，避免默认数值类型干扰。

修改后再选择选项提交，控制台就会输出你期望的对象（比如{ _id: 1, name: "Option 1" }）。

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