自动完成 - 材质 UI - 受控组件不起作用

Question

基本上，我创建了自动完成组件并将默认值设置为我的状态this.state.quest.ansType，但是当我更改此状态时，组件会导致错误：组件正在更改不受控制的自动完成后的默认值状态初始化。要抑制此警告，请选择使用受控自动完成。

我的更新功能需要这个。当用户选择数据库上的寄存器时，我会加载保存在Autocomplete默认值上的选项。

const ansTypes = [
    {
        id: 'T',
        desc: "Texto"
    },
    {
        id: 'M',
        desc: "Multipla Escolha"
    },
    {
        id: 'U',
        desc: "Escolha Única"
    },
];

<Autocomplete className="cb" id={"ansType"} options={ansTypes}
    disableCloseOnSelect
    onChange={obj => this.selectAnsType(obj)}
    defaultValue={this.state.quest.ansType}
    getOptionLabel={option => option.desc}
    renderOption={(option, { selected }) => (
        <React.Fragment>
            <Checkbox
                style={{ marginRight: 8 }}
                checked={selected}
                color={"primary"}
            />
            {option.desc}
        </React.Fragment>
    )}
    renderInput={(params) => (<TextField {...params} label={"Answer Type"} />)}
/>

Answer 1

基本上，您在第一次渲染后一直在更改默认值，这不应该发生。要么使用不受控制的组件（-onChange，-value，+defaultValue，+ref），要么使用受控组件（+onChange，+value，-defaultValue，ref->仅在需要时）。 DefaultValue 应该用于不受控制的！

受控

...


<Autocomplete className="cb" id={"ansType"} options={ansTypes}
    ...
    onChange={obj => this.selectAnsType(obj)}
    value={this.state.quest.ansType}
    ...
/>

不受控制

...
defaultAnsType={...};

myUncontrolledAutocomplete=React.createRef();

<Autocomplete className="cb" id={"ansType"} options={ansTypes}
    ...
    defaultValue={this.defaultAnsType}
    ref={this.myUncontrolledAutocomplete}
    ...
/>

$

个人意见

我会使用受控的，因为它更容易理解。另一方面，不受控制的组件可能会使您的组件无状态，这可能是您将来可能想要使用的东西。