React列表key属性错误解决：MongoDB数据渲染选项不显示

问题现象 #

• 投票标题可正常渲染，但选项无法展示
• 控制台抛出警告："警告：列表中的每个子元素都应该有一个唯一的“key”属性。"

排查与修复步骤 #

• 先确认数据结构是否符合预期
  选项不显示的核心原因大概率是从MongoDB返回的poll.options存在问题——可能不是有效数组、没有text字段，或者本身是空数组。可以在渲染代码里加日志排查：

  {polls.map((poll) => {
    console.log(poll.options); // 打印查看options的实际结构
    return (
      <div key={poll.id}>
        <div>{poll.question}</div>
        {poll.options.map((option, index) => (
          <div key={`${poll.id}-opt-${index}`}>{option.text}</div>
        ))}
      </div>
    )
  })}
  

  查看控制台输出，确认options是否是包含text字段的数组。

• 优化key的唯一性
  你当前用${poll.id}-${index}作为选项的key，虽然能避免重复，但如果后续对选项做增删操作，index作为key可能导致React渲染异常。如果MongoDB给每个option生成了_id或id字段，直接用这个唯一标识当key更可靠：

  {poll.options.map((option) => (
    <div key={option._id}>{option.text}</div>
  ))}
  

  若option没有独立id，再保留${poll.id}-${index}的写法，建议后续给每个option添加唯一标识。

• 添加空状态兜底
  为了避免options为空时页面留白，可以加个兜底提示：

  {poll.options.length > 0 ? (
    poll.options.map((option, index) => (
      <div key={`${poll.id}-opt-${index}`}>{option.text}</div>
    ))
  ) : (
    <div>暂无投票选项</div>
  )}
  

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