自动完成 - MaterialUI - 受控组件不起作用

Question

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

\n\n

我需要这个来实现我的更新功能。当用户在数据库上选择注册时，我将加载自动完成默认值上保存的选项。

\n\n

\r\n

\r\n

const ansTypes = [\r\n    {\r\n        id: \'T\',\r\n        desc: "Texto"\r\n    },\r\n    {\r\n        id: \'M\',\r\n        desc: "Multipla Escolha"\r\n    },\r\n    {\r\n        id: \'U\',\r\n        desc: "Escolha \xc3\x9anica"\r\n    },\r\n];\r\n\r\n<Autocomplete className="cb" id={"ansType"} options={ansTypes}\r\n    disableCloseOnSelect\r\n    onChange={obj => this.selectAnsType(obj)}\r\n    defaultValue={this.state.quest.ansType}\r\n    getOptionLabel={option => option.desc}\r\n    renderOption={(option, { selected }) => (\r\n        <React.Fragment>\r\n            <Checkbox\r\n                style={{ marginRight: 8 }}\r\n                checked={selected}\r\n                color={"primary"}\r\n            />\r\n            {option.desc}\r\n        </React.Fragment>\r\n    )}\r\n    renderInput={(params) => (<TextField {...params} label={"Answer Type"} />)}\r\n/>

\r\n

\r\n

\r\n

\n

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

$

个人想法

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