时间戳

首页 > 解决方案 > 反应“列表中的每个孩子都应该有一个唯一的'关键'道具”

javascript - 反应“列表中的每个孩子都应该有一个唯一的'关键'道具”

问题描述

我正在学习 React，我遇到了这个问题。我已经看过几个堆栈帖子，但到目前为止它们并没有帮助我。问题是，我 100% 肯定我的物品有唯一的钥匙。它们来自数据库，并且主键 DB 值正在“key=”属性中使用。它们不可能是唯一的唯一可能的方式是，如果 React 试图多次渲染数组。

我添加了一个包装器<div>，以便我可以调试这些值，以便我可以直观地确定我的 ids/keys 是唯一的。

这是我的 Project.jsx 导出。在这种情况下， Project 元素是 a styled.div，但我也只尝试了一个常规 div 。

export default ({ project }) => (
  <div key={project.id}>
    <!-- DEBUG -->
    <span>id: {project.id}; name: {project.name}</span>
    <!-- /DEBUG -->
    <Project>
      <NavLink to={`/projects/${project.id}`}>{`${project.name}`}</NavLink>
    </Project>
  </div>
)

它是从我的 Projects.jsx 中调用的，如下所示（模板还有更多内容，但这是相关的部分）：

<div className="projects">
  <Title />
  <div className="card">
    {
      projectList.map(project => (<Project project={project} />))
    }
  </div>
</div>

这是数组的屏幕截图projectList： chrome devtools 注销 projectList，您可以看到每个元素都具有唯一的“id”属性。

我尝试过的事情：

  1. 使用 React.fragment https://github.com/facebook/react/issues/15620
  2. 将“key=”移动到最顶层元素（当 Project 是最顶层元素时它已经存在，但是当我添加调试 div 时我移动了它）：（关闭链接并且找不到它：（）
  3. using key={Math.Random()}，它仍然产生这些错误，但它没有打印列表两次或任何东西

该站点似乎仍然可以正常工作，链接可以正常工作，这只是控制台中的一个大而丑陋的错误（由于这是简历，我真的不想要任何这些！！）。

有人可以帮忙吗？

标签： javascriptreactjs

解决方案

您需要在地图的最高级别提供一个键，这是您的项目组件

<div className="projects">
  <Title />
  <div className="card">
    {
      projectList.map(project => (<Project project={project} key={project.id}/>))
    }
  </div>
</div>

推荐阅读