reactjs - 自动完成 - Material UI - 受控组件不起作用

Question

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

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

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

$

个人意见

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