React MUI Select绑定id为值时选中项不显示对应名称如何解决

核心思路是保持Select绑定id的逻辑不变，仅在渲染Chip时通过id匹配对应的用户名显示，同时修正原有代码里选中项高亮失效的问题。 #

1. 修改Chip的渲染逻辑 #

找到Select组件的renderValue属性，将原来直接用id作为label的逻辑，改为通过选中的id在names数组中匹配对应的用户名：

renderValue={(selected) => (
  <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
    {selected.map((id) => {
      const matchUser = names.find(user => user.id === id);
      return <Chip key={id} label={matchUser ? matchUser.name : id} />;
    })}
  </Box>
)}

2. 修正选中项高亮逻辑 #

原有getStyles函数是拿用户名和id数组比对，永远匹配不到，会导致选中的菜单项没有加粗高亮效果，需要做两处修改：

修改getStyles函数的参数与匹配规则 #

function getStyles(id, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(id) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium
  };
}

修改MenuItem调用getStyles的传参 #

将原来传入name改为传入id：

{names.map(({ id, name }) => (
  <MenuItem
    key={id}
    value={id}
    style={getStyles(id, personName, theme)}
  >
    {name}
  </MenuItem>
))}

修改完成后，personName状态始终存储id列表，console输出逻辑不变，同时选中项的Chip会显示对应用户的name字段。

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