为何React DevTools仅展示<Fragment>的key，却不显示映射列表中<li>元素的key？

别担心，你的key位置完全没放错，React内部确实在正常使用<li>的key，DevTools不显示只是它的展示逻辑问题，不是你的代码有问题～

为什么DevTools只显示Fragment的key？ #

React DevTools对React内置的Fragment元素和普通DOM元素的key展示逻辑不一样：

• 带key的Fragment是比较特殊的存在——通常我们用<></>短语法的Fragment不能加key，只有显式写<Fragment key={...}>时才会被当作带标识的容器，DevTools会专门展示这个key，方便你确认外层列表的key是否正确配置。
• 而像<li>这种普通DOM元素，它们的key是React diff算法内部依赖的核心标识，但DevTools默认不会在可视化面板里把这个内部属性暴露出来。这不是key没生效，只是DevTools的可视化策略没包含这一项而已。

如何验证<li>的key确实在起作用？ #

你可以做个简单的测试：故意给内层<li>设置重复的key（比如把key={ingredient}改成固定值key="test"），这时候React会立刻在浏览器控制台抛出Warning: Encountered two children with the same key的警告，这就直接证明了React确实在识别和使用这个key，只是没在DevTools里显示出来。

关于你把<li>移入Fragment的尝试 #

你提到把<li>放到Fragment里后，DevTools依然没显示它的key——其实这时候<li>的key依然有效，只是DevTools的展示优先级还是偏向于外层Fragment的key，内层DOM元素的key依旧不会被可视化出来，但React内部的diff逻辑还是会正常依赖它。

总的来说，你的写法完全符合React官方文档的要求：两层map()调用里的元素都正确设置了key，React在内部会正常使用这些key做列表的高效更新，DevTools不显示<li>的key只是它的可视化策略问题，不用纠结这个细节～

备注：内容来源于stack exchange，提问作者Pak Long