React列表渲染key警告排查：已设key仍报错且链接失效求助

一、列表key警告解决 #

控制台抛出"Each child in a list should have a unique 'key' prop"警告，原因是QuestionList组件遍历列表时，错误使用了不存在的字段question.id作为key。你的数据源中每个问题的唯一标识字段是_id，不是id，导致所有列表项的key值都是undefined，React判定为重复key。

修复后的QuestionList.jsx代码：

import React from 'react'
import Questions from './Questions'

const QuestionList = ({questionList}) => {
  return (
    <>
      {questionList.map((question) => (
        <Questions question={question} key={question._id}/>
      ))}
    </>
  )
}

export default QuestionList

二、路由链接无法跳转解决 #

路由链接失效有两个原因：

1. Link组件的to属性使用单引号包裹模板字符串，ES6模板变量不会被解析，最终生成的路径是字面量/Questions/${question.id}，而非带真实id的路径；
2. 同样存在字段名错误，使用了不存在的question.id，应该用question._id。

修复后的Questions.jsx中Link部分代码：

<Link to={`/Questions/${question._id}`} className='question-title-link'>{question.questionTitle}</Link>

额外修复：回答数显示错误 #

另外发现Questions组件中回答数字段使用了question.noOfAnswer，但数据源中字段是noOfAnswers，会导致回答数显示异常，建议同步修复：

<div className='display-votes-ans'>
    <p>{question.noOfAnswers}</p>
    <p>Answers </p>
</div>

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