使用带有多个选项的 Material UI Autocomplete 时如何在保持状态的同时防止重新渲染？答案

【问题标题】：How to prevent re-render while keeping state when using Material UI Autocomplete with multiple options?使用带有多个选项的 Material UI Autocomplete 时如何在保持状态的同时防止重新渲染？
【发布时间】：2021-05-08 07:18:40
【问题描述】：

我正在使用 Material UI 的 Autocomplete 组件并启用了多个选项。我需要能够选择多个选项并在每次值更改时更新状态。为此，我使用了 onChange 道具。当只使用一个选项时，这很好用。但是启用多个选项后，每次我选择一个选项时，组件都会重新渲染，我无法选择第二个选项。

这是onChange 处理程序：

const handleUserAssignEvent = (event, value) => {
   setSelectedUsers(value)
}

这是Autocomplete 组件：

const renderUserAssignmentForm = () => {
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />
 const checkedIcon = <CheckBoxIcon fontSize="small" />
 return (
         <Autocomplete
            multiple
            id="usersList"
            options={filteredUsers ?? users ?? []}
            noOptionsText="No users found..."
            disableCloseOnSelect
            onChange={(event, value) => handleUserAssignEvent(event, value)}
            getOptionLabel={(option) => option.fullname}
            renderOption={(option, { selected }) => (
              <>
                <Checkbox
                  icon={icon}
                  checkedIcon={checkedIcon}
                  style={{ marginRight: 8 }}
                  checked={selected}
                />
                {option.fullname}
              </>
            )}
            style={{ width: 500 }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="outlined"
                label="Users"
                placeholder="User lookup..."
              />
            )}
          />
)}

我可以做些什么来更新状态而不让自动完成组件在每次更改时重新呈现并且能够选择多个选项？

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

我已经复制了您的示例 here，选择多个选项没有问题。

您的问题可能是选项道具filteredUsers 和users 与selectedUsers 相关/更改。或者包含renderUserAssignmentForm 的整个组件被卸载并重新安装。

【讨论】：

好的。我猜它一定是导致父组件卸载和安装的其他原因，因为修改selectedUsers 状态的setSelectedUsers 函数仅影响该特定状态。没有其他的。一旦我从事件处理程序中删除它，它就可以工作了。