MUI：提供给自动完成的值无效。没有选项与“0”匹配

Question

我正在使用带有react-hook-form 的MUI自动完成组件。 我遵循了这个答案。

ControlledAutoComplete.jsx

import { Autocomplete, TextField } from "@mui/material";
import React from "react";
import { Controller } from "react-hook-form";

const ControlledAutoComplete = ({
  options = [],
  label,
  renderInput,
  getOptionLabel,
  control,
  defaultValue,
  name,
  errors,
}) => {
  return (
    <Controller
      defaultValue={defaultValue}
      name={name}
      control={control}
      render={({ field }) => (
        <Autocomplete
          options={options}
          getOptionLabel={getOptionLabel}
          defaultValue={defaultValue}
          renderInput={(params) => (
            <TextField
              {...params}
              label={label}
              error={errors[name]}
              helperText={errors[name] && errors[name].message}
              onChange={(e, data) => field.onChange(data)}
            />
          )}
          {...field}
          isOptionEqualToValue={(option, value) =>
            value === undefined || value === "" || option.id === value.id
          }
        />
      )}
    />
  );
};

export default ControlledAutoComplete;

添加费用.jsx

          <ControlledAutoComplete
            control={control}
            name="enrollmentId"
            options={[{ id: 1, firstName: "John"}, { id: 2, firstName: "Jen" }]}
            getOptionLabel={(option) => `${option.firstName}`}
            label="Select Students"
            errors={errors}
            defaultValue={""}
          />

我低于警告，

MUI：提供给自动完成的值无效。 没有一个选项与0匹配。 您可以使用isOptionEqualToValue来自定义相等性测试。

Answer 1

我做错了。 我正在听文本字段上的onChange ，而它应该在AutoComplete上

const ControlledAutoComplete = ({
  options = [],
  label,
  renderInput,
  getOptionLabel,
  control,
  defaultValue,
  name,
  errors,
}) => {
  return (
    <Controller
      name={name}
      control={control}
      defaultValue={defaultValue}
      render={({ field }) => (
        <Autocomplete
          options={options}
          getOptionLabel={getOptionLabel}
          renderInput={(params) => (
            <TextField
              {...params}
              label={label}
              error={errors[name]}
              helperText={errors[name] && errors[name].message}
            />
          )}
          {...field}
          isOptionEqualToValue={(option, value) =>
            value === undefined || value === "" || option.id === value.id
          }
          onChange={(_, data) => field.onChange(data)}
        />
      )}
    />
  );
};

用法，

          <ControlledAutoComplete
            control={control}
            name="enrollmentId"
            options={students}
            getOptionLabel={(option) => `${option.firstName}`}
            label="Select Students"
            errors={errors}
            defaultValue=""
          />

沙箱示例