Material UI 使用 value 属性中的对象选择多个组件，添加重复条目

Question

我有一个多重选择，我将一个对象传递到具有结构的 value 属性中：

选择组件如下所示：

<Select
            multiple
            value={entities}
            onChange={handleChange}
            input={<Input />}
            renderValue={(selected) => (
              <div className={classes.chips}>
                {selected.map((value) => (
                  <Chip
                    key={value.entityId}
                    label={value.entityName}
                    className={classes.chip}
                  />
                ))}
              </div>
            )}
          >
            {props.entityList.map((item, index) => (
              <MenuItem key={item.entityId} value={item}>
                {item.entityName}
              </MenuItem>
            ))}
          </Select>

当弹出选择时，它会显示正确的实体名称，但不会将其显示为在下拉列表中选择。

如果我在下拉列表中选择此项目，它会添加另一个具有相同 id 和相同名称的条目，而不是删除已经存在的项目，这个新添加的重复项可以被删除，并在选择时突出显示，因此该功能可以正常工作。

我存储entities的状态类似于来自父组件的状态：

解决方案：

我已确保在选择中使用相同的对象，初始对象与在更改函数中分配的对象不同。这解决了我的问题。

const [entities, setEntity] = React.useState(
props.entityList.filter((e) =>
  props.assignedEntities.some((ae) => e.entityId === ae.entityId)
)

）；

Answer 1

我遇到了确切的问题，我通过以下方式解决了它。

在我的示例中，我使用角色到用户分配：

这是我的角色对象：

Role
-----
id,
name,
access,
createdUtc

我的组件接收这些道具：

allRoles
user // that has user.roles

这里我只提取角色的 id：

 const [selectedRoleIds, setSelectedRoleIds] = useState([]);

 useEffect(() => {
    if(user) {
      setSelectedRoleIds(user.roles.map(i => i.id));
    }

 }, [user]);

我的多选组件：

<Select
    multiple
    value={selectedRoleIds}
    onChange={handleRoleChange}
    input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
    renderValue={(selected) => (
    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
        {selected.map((roleId) => (
        <Chip key={roleId} label={allRoles?.find(e => e.id === roleId).name} />
        ))}
    </Box>
    )}
    MenuProps={MenuProps}
>
    {roles.map((role) => (
    <MenuItem key={role.id} value={role.id}>
        <Checkbox checked={selectedRoleIds.includes(role.id)} />
        <ListItemText primary={role.name} />
    </MenuItem>
    ))}                      
</Select>

处理角色变更很简单：

  const handleRoleChange = (event) => {
    const {value} = event.target;
    setSelectedRoleIds(value);

  };