我的组件中已经有一个密钥，但为什么它仍在寻找唯一的密钥

Question

我是reactjs的新手，我正试图使用链接到将数据从一个组件传递到另一个组件，这种方法就是我在网上找到的。。

错误：js:1警告：列表中的每个子级都应该有一个唯一的"键"；道具

检查Videos的渲染方法。看见https://reactjs.org/link/warning-keys了解更多信息。在http://localhost:3000/static/js/vendors~main.cochunk.js:134999:31在视频(http://localhost:3000/static/js/main.chunk.js:5570:81)在div在Route(http://localhost:3000/static/js/vendors~main.cochunk.js:135601:29(在交换机(http://localhost:3000/static/js/vendors~main.cochunk.js:135803:29(在路由器(http://localhost:3000/static/js/vendors~main.cochunk.js:1352232:30(在BrowserRouter(http://localhost:3000/static/js/vendors~main.cochunk.js:134853:35(在div在应用

Videos.js

函数视频((｛

const [vids, setVids] = useState([]);
useEffect(() => {
db.collection('videos').orderBy('videoDate', 'desc').onSnapshot(snapshot => {
setVids(snapshot.docs.map(doc => ({
data: doc.data(),
id: doc.id
})))
})
}, []);
return (
<div className="Videos">
<h2> Available Lessons </h2>
<div className="Videos__uploads">
{
vids.map(({ id, data }) => (
<Link to={{ pathname: `/play/${id}`, data: data}}>
{console.log(id)}
<VideoCard
key={id}
videoTitle={data.videoTitle}
videoDate={data.videoDate}
videoCaption={data.videoCaption}
videoUrl={data.videoUrl}
/>
</Link>
))
}
</div>
</div>
)

}

导出默认视频；

VideoPlayer.js函数VideoPlayer(｛videoTitle｝({返回(

你好｛videoTitle｝

)}//我只是想把视频标题打印出来。。但即使是Hello也没有渲染。

但我关注的问题是，当我已经戴上钥匙时，为什么它还在寻找钥匙？

Answer 1

您需要给Link一个唯一的密钥，而不是给VideoCard。

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