已给组件添加key，为什么React仍提示列表子项需要唯一key属性？

你触发key警告的原因很简单：React要求map遍历返回的最外层根元素必须绑定唯一key，你当前代码里map每次返回的根元素是<Link>，你把key={id}写在了它内部的<VideoCard>组件上，React无法识别到最外层元素的key，因此抛出警告。

修复只需要把key属性移到标签上即可，修正后的遍历代码如下：

vids.map(({ id, data }) => (
  <Link 
    key={id}
    to={{ pathname: `/play/${id}`, state: { data: data } }}
  >
    {console.log(id)}
    <VideoCard
      videoTitle={data.videoTitle}
      videoDate={data.videoDate}
      videoCaption={data.videoCaption}
      videoUrl={data.videoUrl}
    />
  </Link>
))

上面的代码同时修正了Link传参的错误写法：react-router约定跳转时携带的自定义参数需要放在state字段下，你之前直接写data: data是无法被路由识别传递的。

首先确认你已经在路由配置中正确注册了路径规则，类似如下写法：

<Route path="/play/:id" element={<VideoPlayer />} />

其次你不能直接通过组件props获取Link传递的参数，需要用react-router提供的useLocation钩子获取state里的参数，修正后的VideoPlayer代码如下：

import { useLocation } from 'react-router-dom'

function VideoPlayer() {
  const location = useLocation()
  // 从state中取到传递的data数据
  const videoTitle = location?.state?.data?.videoTitle || ''
  return (
    <h1>Hello{videoTitle}</h1>
  )
}

export default VideoPlayer

内容的提问来源于stack exchange，提问作者Karl Christopher Samelo