javascript - 无法找出关键和 Prop 的问题

我需要帮助弄清楚为什么当我使用功能组件时，不会收到此类警告：


  index.js：1446警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。


当我使用类组件时，会弹出此警告。

预先感谢您的澄清。

功能组成：

import React from 'react';
import VideoItem from './VideoItem';

const VideoList = ({videos, selectedVideo}) =>{
    const renderedItems = videos.map((video) =>{
        return <VideoItem key={video.id.videoId} video={video} selectedVideo={selectedVideo}/>
    })
    return <div>{renderedItems}</div>
}

export default VideoList;

类组件：

import React, { Component } from 'react';
import VideoItem from './VideoItem';

class VideoList extends Component {
    render() {
        const renderedItems = this.props.videos.map((video) => {
            return <div><VideoItem key={video.id.videoId} video={video} selectedVideo={this.props.selectedVideo}/></div>
        })
        return(
            <div>{renderedItems}</div>
        )
    }
}

export default VideoList;

最佳答案

 const renderedItems = this.props.videos.map((video) => {
            return <VideoItem key={video.id.videoId} video={video} selectedVideo={this.props.selectedVideo}/>
        })

键必须在Div上或将其删除