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

Question

I am new to react js and i'm trying to pass a data from one component to another using Link to and this method is what i found on the net..

ERROR: index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of Videos . See https://reactjs.org/link/warning-keys for more information. at http://localhost:3000/static/js/vendors~main.chunk.js:134999:31 at Videos (http://localhost:3000/static/js/main.chunk.js:5570:81) at div at Route (http://localhost:3000/static/js/vendors~main.chunk.js:135601:29) at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:135803:29) at Router (http://localhost:3000/static/js/vendors~main.chunk.js:135232:30) at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:134853:35) at div at App

Videos.js

function Videos() {

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>
)

}

export default Videos;

VideoPlayer.js function VideoPlayer({ videoTitle }) { return (

Hello{videoTitle}

) } //im just trying to print out the videoTitle here.. but even the Hello is not rendering.

but my focus on this question is why is it still looking for a key when i already put a key on?

Answer 1

You need to give an unique key to Link not to 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>
))