自动完成-MaterialUI-受控组件无效

Question

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

我的更新功能需要这个。当用户选择数据库中的寄存器时，我将加载保存在默认值“自动完成”中的选项。

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->（仅在需要时））。 默认值应用于不受控制的值！

受控

...


<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}
    ...
/>

$

个人意见

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