如何在组件重新渲染时保持材质 UI 自动完成的状态?

Question

我正在使用带有renderOptionprop 的 Material-UI v4AutoComplete组件来呈现checkbox项选项， 但是，问题是当onChange事件触发时，它会更新父组件中的hook并导致对子组件的渲染，因此组件的状态和所选项目的状态丢失，从而导致 UI 和逻辑不一致， 如何在渲染时防止这种情况！

export default function CheckboxesTags() {
return (
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={option => option.title}
onChange={(e, values)=> {
setMoveisFilter(values); // it calls the setter of the hook at the parent component
}}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={params => (
<TextField
{...params}
label="Checkboxes"
placeholder="Favorites"
fullWidth
/>
)}
/>

Answer 1

https://material-ui.com/api/autocomplete/getOptionSelected prop 是你正在寻找的 例如，getOptionSelected = (option， values( => option._id === values._id