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

Question

遇到错误消息：警告：列表中的每个子级都应该有一个唯一的“键”属性。

没有说明明显的，我在这里检查，其他人说添加“关键”道具。

我已经这样做了，但仍然得到错误。可能错过了一些非常明显的东西，但是你能不能指出我错过了什么：

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。

不知道是什么原因导致了这个错误。

还有一个问题要问，可能对社区有很大帮助：我如何确定错误的原因？

该消息非常通用，没有指定列表中缺少键属性的元素或错误所在的位置。

提前谢谢你！

Answer 1

您需要将键道具传递给包装器组件。在这种情况下

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>
            </>
        )
    }