React项目出现Each child in a list should have a unique key prop警告原因排查

这个警告的触发条件不是只有用<ul>/<ol>这类列表标签才会触发，只要你在JSX中渲染任意数组形式的元素集合，React都会要求每个元素绑定唯一的key prop，哪怕你没意识到自己在处理列表。常见的隐藏场景有：

• 用map遍历渲染元素：比如你可能写了{orders.map(order => <div>{order.id}</div>)}，哪怕外层是<div>而非列表标签，这本质是批量渲染数组元素，必须加key。
• 无意识生成元素数组：比如用Array.from、展开运算符创建的元素数组，或者直接写{[<div>订单1</div>, <div>订单2</div>]}这种数组形式的JSX，都会被React判定为需要key的元素集合。
• 子组件返回数组：如果某个子组件的返回值是元素数组（而非单个包裹元素），比如子组件return [ <div>详情1</div>, <div>详情2</div> ]，也会触发警告。
• 条件渲染的数组：比如用三元表达式返回数组，{isLoaded ? orders.map(...) : []}，当条件满足时渲染的数组元素同样需要key。

你可以全局搜索代码里的.map(，或者检查有没有直接渲染数组的JSX片段，就能找到需要加key的地方。

内容的提问来源于stack exchange，提问作者Mr.Unforgettable