无法弄清楚密钥和道具的问题

Question

我需要帮助来弄清楚为什么我在使用函数组件时没有收到此类警告：

index.js:1446 Warning: Each child in an array or iterator should have a unique "key" prop.

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

提前感谢您的澄清。

功能组件：

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;

class 分量：

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

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

试试这个（在映射 fn 中添加 idx）

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

Answer 2

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

密钥必须在 Div 上或将其删除

Answer 3

在您的 class 组件中，key 属性需要位于包装器 div 元素上。

Answer 4

在React中，在一次迭代中，每次迭代root元素应该有一个key属性。

在您的示例中，您将 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;

无法弄清楚密钥和道具的问题

Cannot figure out the problem with key and props

javascript

prop

reactjs