Question

我需要帮助弄清楚为什么当我使用功能组件时，我没有得到这种类型的警告：

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;

Answer 1

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

键必须位于Div上或将其删除

Answer 2

在您的类组件中，key属性必须位于包装器div元素上。

Answer 3

在React中，在一个迭代中，每个迭代 root元素都应具有键属性。

在您的示例中，您将key属性赋予了VideoItem组件。那是包装的div谁应该拥有它。

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

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

export default VideoList;

Answer 4

也许您的ID并不总是唯一的？

尝试一下（在地图fn中添加idx）

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

用钥匙和道具无法解决问题

4 个答案: