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

【问题标题】：Added key prop || Warning: Each child in a list should have a unique "key" prop添加了关键道具 ||警告：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2023-04-07 21:35:01
【问题描述】：

遇到错误消息：警告：列表中的每个孩子都应该有一个唯一的“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。

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

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

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

提前谢谢你！

【问题讨论】：

标签： javascript reactjs

【解决方案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>
            </>
        )
    }

【讨论】：