【问题标题】：i already have a Key in my component but why is it still looking for a unique key?我的组件中已经有一个密钥，但为什么它仍在寻找唯一的密钥？
【发布时间】：2022-01-05 12:16:42
【问题描述】：

我是 react js 的新手，我正在尝试使用 Link to 将数据从一个组件传递到另一个组件这个方法是我在网上找到的..

错误： index.js:1 警告：列表中的每个孩子都应该有一个唯一的“key”属性。

检查Videos的渲染方法。请参阅https://reactjs.org/link/warning-keys 了解更多信息。在 http://localhost:3000/static/js/vendors~main.chunk.js:134999:31 在视频 (http://localhost:3000/static/js/main.chunk.js:5570:81) 在 div 在路线（http://localhost:3000/static/js/vendors~main.chunk.js:135601:29）在 Switch (http://localhost:3000/static/js/vendors~main.chunk.js:135803:29) 在路由器 (http://localhost:3000/static/js/vendors~main.chunk.js:135232:30) 在 BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:134853:35) 在 div 在应用程序

视频.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 功能视频播放器（{视频标题}）{ 返回（

你好{videoTitle}

) } //我只是想在这里打印出 videoTitle.. 但即使 Hello 也没有呈现。

但我对这个问题的关注是，为什么我已经放了钥匙，它还在寻找钥匙？

【问题讨论】：

标签： javascript reactjs firebase

【解决方案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>
))

【讨论】：

ohhhh.. 我会试试的.. 谢谢！