React表格内Select下拉框同步展开问题求助

当前问题：在表格中循环渲染多个Material-UI Select组件时，点击任意一个下拉框，所有下拉框会同步展开；同时选中值也会同步到所有下拉框。

问题原因 #

所有Select组件共用了同一个open状态和age状态，状态更新时会触发所有组件重新渲染，导致同步展开和同步选值。

解决方案 #

将全局状态改为按每个任务ID独立存储，确保每个下拉框拥有自己的展开状态和选中值：

1. 修改状态定义：用对象存储每个任务的展开状态和选中值

// 存储每个任务的下拉框展开状态，key为TaskId
const [openStates, setOpenStates] = React.useState({});
// 存储每个任务的选中值，key为TaskId
const [selectedAges, setSelectedAges] = React.useState({});

2. 更新事件处理函数：传入任务ID，仅修改对应任务的状态

const handleChange = (event, taskId) => {
  setSelectedAges(prev => ({ ...prev, [taskId]: event.target.value }));
};

const handleClose = (taskId) => {
  setOpenStates(prev => ({ ...prev, [taskId]: false }));
};

const handleOpen = (taskId) => {
  setOpenStates(prev => ({ ...prev, [taskId]: true }));
};

3. 修改循环渲染的Select组件：为每个组件绑定独立的状态和事件

<table id="customers">
  <tr>
    <th>Status</th>
    <th>Comments</th>
  </tr>
  {ViewChecklistItem.map((row) => (
    <tr key={row.TaskId}>
      <td>
        <FormControl sx={{ m: 1, minWidth: 120 }}>
          {/* 为每个标签和Select设置唯一ID */}
          <InputLabel id={`age-select-label-${row.TaskId}`}>Age</InputLabel>
          <Select
            labelId={`age-select-label-${row.TaskId}`}
            id={`age-select-${row.TaskId}`}
            {/* 取当前任务的展开状态，默认false */}
            open={openStates[row.TaskId] || false}
            onClose={() => handleClose(row.TaskId)}
            onOpen={() => handleOpen(row.TaskId)}
            {/* 取当前任务的选中值，默认空字符串 */}
            value={selectedAges[row.TaskId] || ""}
            label="Age"
            onChange={(e) => handleChange(e, row.TaskId)}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </td>
      <td>View comments</td>
    </tr>
  ))}
</table>

关键说明 #

• 为每个Select和对应的InputLabel设置唯一ID，避免DOM元素ID冲突
• 使用对象存储状态时，通过扩展运算符...prev保留原有状态，仅更新当前任务的对应值
• 事件处理函数通过闭包传递当前任务的TaskId，确保只修改对应组件的状态

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