React使用Material UI AutoComplete+useState报值不匹配错误

报错核心原因 #

MUI Autocomplete 抛出该错误的本质是组件判定传入的选中值（含默认值、受控value）不在可选options列表内，你的代码存在两个直接触发问题：

1. 默认值结构不匹配：定义的defaultValue为{ id: '1' }，仅含id字段，但options列表内的选项均为包含id/name/description三个字段的完整对象，该默认值本身不属于有效选项。
2. 默认相等判断规则限制：Autocomplete 默认使用===严格相等做匹配，要求传入的选中值必须是options数组内的原对象引用，就算字段完全一致，只要是单独新建的对象，也会判定为无匹配。

修复方案 #

推荐使用自定义相等判断的方案，适配后续接口回显、受控赋值等绝大多数业务场景，不需要强制要求选中值和options内的对象是同一引用：

• 给Autocomplete组件添加isOptionEqualToValue属性，自定义按唯一标识id做匹配判断
• 补全受控组件的value属性绑定（原代码中定义了value状态但未传入组件，属于冗余逻辑）
• 修正默认值的匹配逻辑，不需要手动写残缺的默认对象

修复后的完整代码如下：

function WomanAutoComplete(props) {

    const data = [
        {
            id: '1',
            name: 'Stefanie',
            description: 'I love her',
        },
        {
            id: '2',
            name: 'Jasmin',
            description: 'I miss her',
        },
        {
            id: '3',
            name: 'Angie',
            description: 'I hate her',
        }
    ];

    // 直接取匹配id的完整选项作为默认值
    const defaultValue = data.find(item => item.id === '1');
    const [value, setValue] = useState(defaultValue);

    const defaultProps = {
        options: data,
        getOptionLabel: (option) => option.name,
        // 自定义相等判断：只要id一致就判定为匹配
        isOptionEqualToValue: (option, value) => option.id === value.id
    };

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

注意：如果使用非受控模式，可去掉value状态绑定，仅保留defaultValue即可。只要配置了isOptionEqualToValue，哪怕传入的选中值是接口返回的独立对象，只要id和选项匹配就不会报错。

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