如何配置Material UI Autocomplete的value属性以加载数据库存储的正确值

核心逻辑说明 #

Material UI的Autocomplete单选模式下，value属性需要传入和options数组单项结构完全一致的对象（你这里就是DropdownModelCombo类型的{value, label}结构），如果没有选中值则传null。你当前状态定义里把autoUserSelectedValue声明为数组是错误的，单选场景不需要数组，调整步骤如下： #

步骤1：修正状态定义

把autoUserSelectedValue的类型从数组改为单个对象或null：

interface IState {
    insurance: InsuranceModel;
    autoUsers: Array<AutoUserModel>;
    autoUserDropdown: Array<DropdownModelCombo>;
    autoUserSelectedValue: DropdownModelCombo | null; // 修正类型
}
constructor(props: IProps) {
    super(props);
    this.state = {
        insurance: props.currentInsurance,
        autoUsers: new Array<AutoUserModel>(),
        autoUserDropdown: new Array<DropdownModelCombo>(),
        autoUserSelectedValue: null, // 初始值设为null
    };
}

步骤2：在下拉选项加载完成后匹配数据库存储的值

在ComponentDidMount拿到所有下拉选项后，根据insurance.autoUserId匹配对应的下拉项，赋值给autoUserSelectedValue：

this.autoUserService.getAllActiveAutoUsers().then(
    (data: any) => {
        const autoUserDropdown1 : Array<DropdownModelCombo> = [];
        data.map(autoUser => {
            autoUserDropdown1.push({
                value:autoUser.autoUserId,
                label:autoUser.autoUserName
            })
        });
        // 匹配数据库中存储的autoUserId对应的下拉项
        const selectedItem = autoUserDropdown1.find(item => item.value === this.state.insurance.autoUserId) || null;
        this.setState({
            isLoading: false,
            autoUsers: data,
            autoUserDropdown: autoUserDropdown1,
            autoUserSelectedValue: selectedItem // 赋值选中项
        });
    })
    .catch(error => {
        this.snackbar.show({ severity: 'error', summary: error.message });
        this.setState({
            isLoading: false
        });
    });

步骤3：给Autocomplete的value属性赋值，补充选中逻辑

直接把this.state.autoUserSelectedValue传给value，同时补充handleChangeSelectAutoComplete的处理逻辑：

// Autocomplete组件
<Autocomplete
    disablePortal
    id="combo-box-demo"
    value={this.state.autoUserSelectedValue} // 直接传选中的对象
    options={autoUserDropdown}
    sx={{ width: 300 }}
    onChange={(e, value) => this.handleChangeSelectAutoComplete( e, value, 'autoUserId')}
    renderInput={(params) => <TextField {...params} label="AutoUser" />}
/>

// 选中事件处理逻辑
handleChangeSelectAutoComplete = (e: any, selected: DropdownModelCombo | null, field: string) => {
    this.setState({
        autoUserSelectedValue: selected,
        insurance: {
            ...this.state.insurance,
            [field]: selected ? selected.value : null // 把选中的id存入insurance对应字段
        }
    })
}

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