如何在Material UI AutoComplete标签中渲染props传入的选中角色值

核心问题分析 #

你遇到的问题主要是没给Autocomplete组件正确配置受控值，也缺少对象类型选项的选中判断逻辑，导致组件没法识别哪些是已选中的角色。下面是具体的修复方案：

具体修复步骤 #

1. 绑定受控值：给组件传入value={collab.roles}，明确告诉组件当前已选中的角色列表
2. 配置选中判断规则：因为选项是对象类型，默认会通过引用判断是否选中，若你的collab.roles和allRoles里的对象是不同实例（比如从API获取的新对象），必须用getOptionSelected指定通过id来匹配选中状态
3. 修正标签渲染逻辑：用组件传入的tagValue（也就是当前选中的value）渲染标签，保持受控逻辑的一致性，不要直接硬引用collab.roles

修改后的完整代码 #

const RoleCollabRow: React.FC<Iprops> = ({ collab }) => {
  console.log(collab.roles);
  // [
  //  {id:1, label:"A"},
  //  {id:2, label:"B"}
  //]

  console.log(allRoles);
  /*
  [
     {id:1, label:"A"},
     {id:2, label:"B"},
     {id:3, label:"C"},
     {id:4, label:"D"},
     {id:5, label:"E"},
  ]
  */

  return (
    <Autocomplete
      classes={{ inputRoot: isBigScreen ? classes.autoCBigScreen : classes.autoC }}
      multiple
      disableCloseOnSelect
      disableClearable
      limitTags={3}
      options={allRoles}
      // 新增：通过id判断选项是否被选中，避免对象引用不同导致识别失败
      getOptionSelected={(option, value) => option.id === value.id}
      getOptionLabel={(option) => option.label || ""}
      // 新增：传入已选中的角色列表作为受控值
      value={collab.roles}
      renderOption={(props, option, { selected }) => (
        <li {...props} key={option.id}>
          <Box display="flex" alignItems="center">
            <Typography style={{ marginLeft: 8 }}>
              <Checkbox checked={selected} /> {option.label}
            </Typography>
          </Box>
        </li>
      )}
      placeholder={selectedRole.length === 0 ? "Non attribué" : ""}
      autoHighlight
      onChange={handleChangeRole}
      onClose={handleCloseAutoComplete}
      inputValue={searchRole}
      onInputChange={(e, value) => setSearchRole(value)}
      style={{ width: 400 }}
      renderTags={(tagValue, getTagProps) => {
        // 修改：使用组件提供的tagValue（即当前选中值）渲染标签
        return tagValue.map((option, index) => (
          <Chip {...getTagProps({ index })} label={option.label} />
        ));
      }}
    />
  );
};

额外注意事项 #

• 确保handleChangeRole函数在用户选择新角色时，能正确更新对应的状态（比如更新collab.roles或父组件的相关状态），这样组件才能保持值的同步
• 如果selectedRole是你用来跟踪选中状态的变量，需要确保它和collab.roles保持一致，或者直接用collab.roles作为唯一数据源

内容的提问来源于stack exchange，提问作者HachimJ