无序列表中的 ReactJS 可包装组件，根据包装的位置给出错误

问题描述

我仍在学习 ReactJS，但我发现了一些奇怪的东西，我将特殊的道具 children 用于 Card 组件，该组件将围绕从 Firebase 获取的一些元素。我正在使用一个教程，但后来我决定自己复制它，同时我发现如果我将 Card 包裹在 Children 组件周围，我会得到一个 Unique key error，但是当我包裹它围绕在 li 定义中使用的 Children ，错误消失了，最奇怪的是，当我在两种情况下检查元素时，HTML 代码完全相同，这里是两种情况：

这给出了一个错误：

//    Inside the Parent component
       <ul className={classes.list}>
        {props.children.map((child) => {
            return (
             <Card>
                <Children
                    key={child.id}
                    ...
                    title={child.title}
                />
             </Card>
            )
        })}
       </ul>

这不会报错：

// Inside the Children component definition
<Card>
    <li>
       <div>{props.title}</div>
       ... 
       <div>
           <button>Something</button>
       </div>
    </li>
</Card>

在这两种情况下，HTML 结构都是这样的：

<ul class='Parent__List'>
   <div class='Card'>
      <li class='Children__someClassName'>

我想知道的是，如何知道放置一些可包装的组件是否会出错？或者，为什么这仅在两种情况之一中才会出现错误？希望你能回答这个问题并告诉文档中这些信息的位置，以便我阅读。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）