Reactjs 具有自动完成功能的 Formik material ui 无法按预期工作

这是因为技能列表中没有{Label:‘’，Value:‘’}这样的初始值.因此在isOptionEqualToValue中，它将返回FALSE

只需删除isOptionEqualToValue属性，然后在值中判断是否存在具有该值选项，如果没有设置为空

  const getValueFromOptions = (value: string) => {
    return (
      options.find((option: any) => option.value === value) ?? null
    );
  };

在自动完成中:

<Autocomplete
     
      value={getValueFromOptions(field.value)}
    ...

或判断field.value是否具有值，否则为空

  <Autocomplete
         
      value={Boolean(field.value?.value) ? field.value : null}
    ...

另一个错误来自Show Error Message，因为meta.error是包含值和标签错误的对象，所以您需要显示其中之一，我将其更改为:

renderInput={(params) => {

        const errorMsg = meta.error as { value?:string }

        return (
          <TextField
            {...params}
            label={label}
            name={name}
            error={showError}
            helperText={meta.touched && errorMsg?.value}
          />
        );
      }}

另一个错误来自于显示错误消息，它显示‘skill.value是必填字段’，所以我只是在YUP验证中添加了新消息

validationSchema: Yup.object().shape({
      skill: Yup.object().shape({
        value: Yup.string().required('skill is a required field'),
        label: Yup.string()
      })
    }),

您可以在这里看到纯代码:https://codesandbox.io/s/blissful-nova-nqvxq2?file=/src/components/AutocompleteField.tsx