添加了关键道具 ||警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Posted 2023-02-22

【中文标题】添加了关键道具 ||警告：列表中的每个孩子都应该有一个唯一的“关键”道具

【英文标题】：Added key prop || Warning: Each child in a list should have a unique "key" prop

【发布时间】：2021-10-05 18:37:36

【问题描述】：

遇到错误消息：警告：列表中的每个孩子都应该有一个唯一的“key”道具。

没有说清楚，我在这里检查过，其他人说要添加“key”道具。

我已经这样做了，但仍然出现错误。可能遗漏了一些完全明显的东西，但请您指出我遗漏的内容：

createPlaylist = () =>  
        return (
            <>
                <h2>Expected Result</h2>
                <ul key="playlist">
                
                    this.state.playlist.map((section, index) => (
                        <>
                        <li key=index><h4>section.sectionName</h4></li>
                        <ul key=section.sectionId>
                            
                                section.lessons.map((lesson, i) => (
                                    <li key=i>
                                    lesson.name<br/>
                                    </li>   
                                ))
                            
                        </ul>
                        </>
                    )     
                    )   
                
                </ul>
            </>
        )
    

所有 ID 都是唯一的，因为它只使用了几个项目，所以我在索引和 uuid 之间进行了交换，但仍然得到相同的错误。章节和课程没有重复的 uuid。

不知道是什么导致了错误。

要问的另一个问题并且可能对社区有很大帮助：我如何确定导致错误的原因？

该消息非常笼统，并没有指定列表中的哪个元素缺少关键道具或错误所在。

提前谢谢你！

【参考方案1】：

您需要将 key 属性传递给包装器组件。在这种情况下

createPlaylist = () =>  
        return (
            <>
                <h2>Expected Result</h2>
                <ul key="playlist">
                
                    this.state.playlist.map((section, index) => (
                        <key=keyId> // you need pass the key prop here.
                        <li ><h4>section.sectionName</h4></li>
                        <ul >
                            
                                section.lessons.map((lesson, i) => (
                                    <li key=i>
                                    lesson.name<br/>
                                    </li>   
                                ))
                            
                        </ul>
                        </>
                    )     
                    )   
                
                </ul>
            </>
        )
    

【讨论】：

非常感谢！！！知道这将是我显然想念的东西。再次感谢您帮我解决问题！

【参考方案2】：

请在根级元素传递密钥。

createPlaylist = () =>  
        return (
            <>
                <h2>Expected Result</h2>
                <ul key="playlist">
                
                    this.state.playlist.map((section, index) => (
                        <key=index>
                        <li ><h4>section.sectionName</h4></li>
                        <ul >
                            
                                section.lessons.map((lesson, i) => (
                                    <li key=i>
                                    lesson.name<br/>
                                    </li>   
                                ))
                            
                        </ul>
                        </>
                    )     
                    )   
                
                </ul>
            </>
        )