每当尝试打开管理仪表板时都会出现未捕获的错误 axioserror

Question

错误 请求失败，状态码 404 AxiosError：请求失败，状态码 404 解决时（http://localhost:3000/static/js/bundle.js:167104:12） 在 XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:165790:66)

每当我尝试打开管理仪表板时，我都会在电子商务 Mern 项目中遇到此错误。实际问题在哪里，我不明白

“遇到两个具有相同密钥的子项，

4

。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的密钥可能会导致子项重复和/或省略 - 该行为不受支持，并且可能会在未来的版本。”

Answer 1

很高兴认识你。 让我来回答你的问题吧。

---

在React中，当使用map()函数渲染元素或组件数组时，每个项目应该有一个唯一的key prop。 这有助于 React 在发生更改时有效地更新和重新排序列表。

要解决这个问题，您需要确保map()函数生成的每个子元素或组件都有唯一的键。 键可以是数据中的标识符，例如 ID 或索引（但索引不是一个好的决定），就像这样：

{
  data.map((item) => (
     <ItemComponent key={item.id}/>
 ))
}

确保将

key

属性设置为循环中每个项目唯一的值。

当然我的解决方案可能是错误的，我会尽力解决您的问题。 请给我有关您的项目的详细信息，例如 git 存储库。 感谢您的关注。

Answer 2

Encountered two children with the same key

这是一个常见的 React 问题。检查该页面上的所有迭代器，并查看您为子级传递

key

值的内容。每组按键必须是唯一的。

您多次使用

4

的值作为组的键。 检查您正在迭代的内容是否没有重复项。如果是这样，找到一种方法来增强您的密钥，使其变得独一无二。

关于此的React Docs是一个很好的资源。