React Material UI 表格实现每行单个下拉框整合所有键值对选项

原代码在渲染表格行时，每遍历到一个非name的对象属性，就会独立渲染一个包裹下拉框的TableCell。这种逻辑会让表格列数随每行属性数量动态变化，出现多余的独立单元格，和表头定义的两列结构错位。

要达成“每行仅配置一个下拉选择框，所有非name的键值对都作为该下拉框的选项”的目标，需要调整遍历的作用范围：

• 每行固定渲染两个单元格，对应表头的两列结构，不再按属性数量生成额外单元格
• 在“Object Field and Values”对应的单元格内部，遍历当前行的非name属性，将每个键值对生成为下拉框的选项
• 补充下拉框的受控状态逻辑，保证选中值可以正常存储

首先在组件内部添加受控状态定义，用于存储每一行的下拉选中值：

// 结构：{ 行对象的name属性: 当前选中的选项值 }
const [selectedRowOptions, setSelectedRowOptions] = useState({});

表格渲染部分调整为：

<TableContainer component={Paper}>
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell>Object Name</TableCell>
        <TableCell align="center">Object Field and Values</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {unionArray?.map((row) => {
        // 过滤出当前行所有非name属性，作为下拉选项的数据源
        const optionList = Object.entries(row).filter(([key]) => key !== "name");
        // 读取当前行的选中值，无选中时默认空值
        const currentSelected = selectedRowOptions[row.name] ?? "";

        return (
          <TableRow key={row.name}>
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            {/* 固定渲染一个对应列的单元格 */}
            <TableCell align="center">
              <FormControl variant="outlined" className={classes.formControl}>
                {/* 每行下拉使用独立id，解决InputLabel与Select的关联错位问题 */}
                <InputLabel htmlFor={`values-select-${row.name}`}>
                  Values
                </InputLabel>
                <Select
                  native
                  label="Value"
                  id={`values-select-${row.name}`}
                  value={currentSelected}
                  onChange={(e) => {
                    setSelectedRowOptions(prev => ({
                      ...prev,
                      [row.name]: e.target.value
                    }))
                  }}
                >
                  <option aria-label="None" value="" />
                  {/* 遍历生成下拉选项，不额外生成单元格 */}
                  {optionList.map(([key, value]) => (
                    <option key={key} value={`${key}:${value}`}>
                      {key}:{value}
                    </option>
                  ))}
                </Select>
              </FormControl>
            </TableCell>
          </TableRow>
        )
      })}
    </TableBody>
  </Table>
</TableContainer>

调整后表格会严格匹配表头的两列布局，每一行的字段列仅展示一个下拉选择框，所有属于当前行的非name属性键值对，都会作为选项收纳在这个选择框内部，不会再出现按属性数拆分的多余单元格。

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