如何动态生成多个 MUI Select 元素及其选项？

Question

根据现有数据，我正在动态生成多个 MUI“”元素之一交互时，selected 值将应用于所有“”元素。每个都有不同的 3 个选项。当我 select 使用第一个“”元素中的值也会改变。

我的元素生成代码：

const [selectedElements, setSelectedElements] = React.useState([]);
    
const onSelectionChange = (event, serviceGroup) => {
  const value = event.target.value;
    
  setSelectedElements(
    typeof value === 'string' ? value.split(',') : value,
  ); 
}

return (
<div>
  {
    groups.map(function(group) {
        return (
            <Select
                multiple
                value={selectedElements}
                onChange={(e)=>onSelectionChange(e, group)}
                id={group.group_id}
                renderValue={(selected) => selected.join(', ')} 
            >
                {
                    options.map(function (option) {
                        if (option.group_id === group.group_id) {
                            return (
                                <MenuItem
                                    key={option.option_id}
                                    value={option.name}
                                >
                                    <ListItemText primary={option.name} />
                                    <Checkbox checked={selectedElements.indexOf(option.name) > -1}/>
                                </MenuItem>
                            )
                        }
                    })
                }
            </Select>
        )
    })
  }
</div>
)

我知道“value={selectedElements}”会导致每个动态生成的“

如何动态生成多个 MUI Select 元素及其选项？

How can I dynamically generate several MUI Select elements and their options?

reactjs

material-ui