React中如何将二维答案数组映射为单个ListItemButton列表

要实现仅渲染sortedAnswers第一个子数组中的每个答案为ListItemButton，核心是精准取出第一个子数组并遍历，以下是具体实现方案：

核心代码示例 #

import ButtonGroup from '@mui/material/ButtonGroup';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';

function AnswerList({ sortedAnswers }) {
  // 取出第一个子数组，处理空数组/未定义的边界情况
  const targetAnswers = sortedAnswers[0] || [];

  return (
    <ButtonGroup variant="contained" orientation="vertical">
      {targetAnswers.map((answer, idx) => (
        <ListItemButton key={idx}>
          <ListItemText primary={answer} />
        </ListItemButton>
      ))}
    </ButtonGroup>
  );
}

关键说明 #

1. 精准定位目标数组：直接通过sortedAnswers[0]获取第一个子数组，同时用|| []处理sortedAnswers为空或第一个子数组不存在的情况，避免map调用时报错。
2. 遍历生成按钮：对取出的目标子数组调用map，每个元素对应一个ListItemButton，确保每个答案单独渲染。
3. 唯一key值：示例中用索引idx作为key，如果你的Answer对象有唯一标识（比如id），建议替换为该标识，提升渲染性能。

常见问题排查 #

如果之前渲染不符合预期，大概率是误遍历了整个二维数组（比如直接对sortedAnswers调用map），导致所有子数组的答案都被渲染。只需要将遍历对象改为sortedAnswers[0]即可解决。

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