Material UI 自动完成功能不更新输入值（React）

Question

我使用材料UI的自动完成组件在React中制作了一个自动完成组件。这是我输入时选项显示的代码

import { useState } from "react";
import { Autocomplete as MuiAutcomplete } from "@mui/material";
import {useFormContext} from "react-hook-form";


interface props {
    name: string,
    options?: string[],
    getOptions?: (value: string) => {
        label: string,
        id: number
    }[] | string[],
    freeSolo?: boolean
};

const Autocomplete = ({name, options=[], getOptions, freeSolo=false}: props) => {
    const [autocompleteValues, setAutocompleteValues] = useState<any[]>(options);
    const {setValue, getValues} = useFormContext();

    return (
        <MuiAutcomplete
            options={autocompleteValues}
            renderInput={({ InputProps, inputProps }) => (
                <div ref={InputProps.ref}>
                <input
                    type="text"
                    {...inputProps}
                    className="bg-transparent outline-none p-1"
                />
                </div>
            )}
            value={getValues(name)}
            onChange={(e, v) => {
                setValue(name, v);
            }}
            getOptionLabel={(option) => option.label || option}
            freeSolo={freeSolo}
        />
    )
}

export default Autocomplete;

，但是当实际选择一个选项时，输入字段实际上并未更新。相反，它显示了此错误：

`MUI: The value provided to Autocomplete is invalid.None of the options match with `""`.You can use the `isOptionEqualToValue` prop to customize the equality test. `

我不完全确定发生了什么。这是一个视频，显示错误，以防您需要澄清 https://i.sstatic.net/qmfog.jpg （对不起，较低的Res，Imgur的压缩破坏了）

Answer 1

您能否请详细信息选项您正在通过吗？

如果您可以提供代码框，那就更好了。

您要选择的option不匹配value in options

Answer 2

“”值是自动完成的实际值。如果您想在空地上使用它，则可以：

// Set value to null. If you set it to 'undefined' it will give you a warning similar to the current one
value={getValues(name) || null}

或

// Override the function which checks if the value is equal to the option.
// Basically, you handle the empty string here.
isOptionEqualToValue={(option, currentValue) => {
            if (currentValue === '') return true;
            return option.name === currentValue.name;
          }}

Answer 3

由于MUI中的修复程序，这可能不再是一个问题，但是我遇到了同样的问题，而GitHub问题中没有任何应用于我自己的情况。

我注意到，如果您通过不确定的值作为值支柱最初将自动完成组件从不受控制的模式永久切换到控制模式（控制台日志实际上是这样说的！）。这意味着然后由组件内部对价值道具进行处理，因此您无法从外部自动完成。

该解决方案是通过null传递，因为价值支柱将组件保持不受控制的模式，并且在此之后通过适当的刷新后传递的所有道具即使选项（或值）延迟了异步。