React:如果我实现了修复，为什么我仍然会得到唯一的密钥道具警告

Question

所以我添加了对唯一密钥道具警告的修复：

import React from 'react';
import VideoItem from './VideoItem';
const VideoList = ({ videos, onVideoSelect }) => {
const renderedList = videos.map((video) => {
return (
<VideoItem
key={video.id.videoId}
onVideoSelect={onVideoSelect}
video={video} />
);
});
return <div className="ui relaxed divided list">{renderedList}</div>;
};
export default VideoList;

我错过了什么或没有看到什么？我仍然会出错。

Answer 1

看起来不错。很可能你的来源有重复的id。打印出来并检查。

Answer 2

@Daniel，我认为您仍然会得到唯一密钥错误，因为可能是您返回的具有类似id的密钥-

你可以试试这样的东西-

import React from 'react';
import VideoItem from './VideoItem';
const VideoList = ({ videos, onVideoSelect }) => {
const renderedList = videos.map((video, index) => {
return (
<VideoItem
key={video.id.videoId+index}
onVideoSelect={onVideoSelect}
video={video} />
);
});
return <div className="ui relaxed divided list">{renderedList}</div>;
};
export default VideoList;