React、MUI 自動完成和 useState

Question

我正在嘗試在 React 中實現 MUI 的 AutoComplete 組件，但我遇到了一些錯誤，無法理解我做錯了什么。

這些是我得到的錯誤：

MUI: The value provided to Autocomplete is invalid.
None of the options match with `{"id":"2","name":"Delta Super","description":"Deltamethrin 0.025%"}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.

這是我的代碼：

function PesticideAutoComplete(props) {

    const data = [
        {
            id: '1',
            name: 'Parmenona',
            description: 'Permethrin 0.020%',
        },
        {
            id: '2',
            name: 'Delta Super',
            description: 'Deltamethrin 0.025%',
        },
        {
            id: '3',
            name: 'Shoam',
            description: 'Bifenthrin 0.1%',
        }
    ];

    const defaultValue = { id: '1' };
    const [value, setValue] = useState(defaultValue);

    const defaultProps = {
        options: data,
        getOptionLabel: (option) => option.name,
    };

    return (
        <Autocomplete
            {...defaultProps}
            id="grid-choose-pesticide"
            clearOnEscape
            defaultValue={defaultValue}
            onChange={(event, newValue) => {
                console.log(newValue);
                setValue(newValue);
            }}
            renderInput={(params) => (
                <TextField {...params} label="Pesticide" />
            )}
        />
    );
}

Answer 1

如果您想輸入值，我不會使用默認道具，請使用 options={} 道具將值注入到 ac 組件中。

 < Autocomplete options = {data} getOptionLabel={(option) => option.name} id = "grid-choose-pesticide" clearOnEscape defaultValue = { defaultValue } onChange = { (event, newValue) => { console.log(newValue); setValue(newValue); } } renderInput = { (params) => ( < TextField { ...params } label = "Pesticide" / > ) } />

Answer 2

您需要在元素中覆蓋isOptionEqualToValue ：

<Autocomplete
    {...defaultProps}
    id="grid-choose-pesticide"
    clearOnEscape
    defaultValue={defaultValue}
    onChange={(event, newValue) => {
        console.log(newValue);
        setValue(newValue);
    }}
    renderInput={(params) => (
        <TextField {...params} label="Pesticide" />
    )}
    isOptionEqualToValue={(option, value) => option.id === value.id}
/>

發生這種情況的原因是自動完成功能會將您選擇的對象與后面的預定義對象進行比較。 你可以在這篇文章中看到完整的解釋。