react · JavaScript
报错原文
Each child in a list should have a unique "key" prop.
这是什么意思
作为列表渲染的兄弟元素没有 key，于是下一次渲染时 React 无法把它们和同一批数据对应起来。你用 items.map(...) 造元素时漏了 key；这只是警告，界面照样画得出来，但列表一变它就以无声的 bug 回来——症状是输入框的值或动画留在了错误的那一行。用数据里稳定的 id 作 key。用数组下标当 key，只有在顺序永不改变、也从不在中间插入或删除的列表里才安全，否则它复现的几乎就是「没有 key」的那个问题。从 React 19 起，前面的 Warning: 不再出现。
怎么修
这个没有一行命令能解决。说明里写了该看哪里。
- 来自
- react
- JavaScript
- 15
浏览器和 node 的错误通常只告诉你什么坏了，不告诉你那个值为什么变成这样——你读了 undefined、它不是函数、它不是 JSON——所以该修的地方在抛错那一行的上游；只用 ?. 和默认值把那一行按住，同样的问题会在更远的地方、以更难辨认的样子回来。
怎么读报错
- 从第一行往下读。越往下越是工具内部的事，起因通常写在最上面。
- 有文件名和行号就从那里查——不是栈顶那一帧，而是最上面那条提到你自己写的文件的行。
- 把报错原文照样去搜，但先去掉你自己的路径和变量名，正是那些让搜索匹配不上。
- 同一种情况在不同版本里措辞不同。结果不对头，就把版本号一起加进查询。
- 粘贴修法之前，先确认它会丢掉什么。这里面有些是不能撤回的。
常见问题
Q. “Each child in a list should have a unique "key" prop.” 是什么意思？
作为列表渲染的兄弟元素没有 key，于是下一次渲染时 React 无法把它们和同一批数据对应起来。你用 items.map(...) 造元素时漏了 key；这只是警告，界面照样画得出来，但列表一变它就以无声的 bug 回来——症状是输入框的值或动画留在了错误的那一行。用数据里稳定的 id 作 key。用数组下标当 key，只有在顺序永不改变、也从不在中间插入或删除的列表里才安全，否则它复现的几乎就是「没有 key」的那个问题。从 React 19 起，前面的 Warning: 不再出现。
Q. 怎么修？
没有一行命令能解决。上面的说明写了该看哪里。
Q. 这是哪个工具报的？
react。它属于JavaScript，报错原文有 11 个词。
相关报错
Objects are not valid as a React child (found: object with keys {name, id})reactToo many re-renders. React limits the number of renders to prevent an infinite loop.reactUncaught TypeError: Cannot read properties of undefined (reading 'name')chromeTypeError: items.map is not a functionchromeRangeError: Maximum call stack size exceedednodeSyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSONchrome 111+SyntaxError: Unexpected end of JSON inputchromeTypeError: Failed to fetchchrome