问题标签 [react-key-index]

我想使用 react-key-index 扩展来生成唯一的 id。我试图实现他们的示例，但无论我做什么，它仍然会抛出同样的错误：

TypeError：Hashids 不是构造函数

链接：react-key-index npmjs

这是一个非常简单的例子：

应用程序.js：

index.js：

请问，你知道我在哪里做错了吗？我正在尝试将其设置为全新的反应项目（create-react-app）。从我的角度来看，我已经正确地实现了它（但显然我没有）。以下是该错误在浏览器中的样子：

当使用动态数量的组件时，React 要求开发人员提供一个唯一的键，以免抛出这个错误：

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

假设每个孩子根据某个道具显示不同的图标和标签。这里的使用useMemo对性能有影响吗？

如果我使用索引作为键，我不能让它无法正常工作。唯一的方法是如果我改变数组并使用索引作为键。但是由于文档说不要改变状态（数组），所以如果是这样的话，我不能让它不能很好地工作，这与文档所说的相反。我怎样才能证明它可能会破裂？

如果我改变状态，我可以让它中断，文档说不应该这样做：

但是如果我改变状态并使用索引作为键，我什至不能打破它，如果它是一个类组件：

我有一个项目画廊。记忆卡游戏的 2 个项目总是相同的（记住 2 个匹配的图像）。现在，如果我通过映射，我会得到每个孩子都应该拥有唯一键的错误，因为我将 id 作为键。然而，我渲染的 2 个项目是完全相同的。我看到的唯一方法是将索引作为键，这不好。

我如何在不传入 index.html 的情况下做到这一点？

在 Reconciliation 的 ReactJS 页面中，有两个例子：

1. 使用索引作为键可能导致的问题的示例
2. 同一示例的更新版本，展示了如何不使用索引作为键来解决这些重新排序、排序和前置问题

截至 2020 年 2 月 18 日，尚不清楚如何在页面上重现该问题。我尝试了几次单击“添加新的开始”或“结束”并重新排序列表，它们似乎工作正常。直到后来我才发现你需要在框中输入一些文本，然后只需“Add New to End”，然后重复三遍，然后重新排列列表。

在第一个示例中，输入框中的文本没有重新排序。在第二个示例中，输入框中的文本按预期重新排序。

这两个程序的不同之处在于使用

对比

在两个版本之间还有一些稍微重新排序的代码和使用todoCountervs toDoCounter(capital D)，我想知道为什么，React 团队可能会在以后修复它。但是您可以将第一个版本从key={index}to修改key={todo.id}，您也可以看到问题已解决。

但是当我查看代码时，输​​入框实际上并没有将文本数据添加到状态属性list（数组）中。只有id和createdAt被添加到每个新条目list。

因此，虽然我们可以说使用key={todo.id}解决了问题，但首先是什么导致了问题？

您可以说idandcreatedAt已正确排序。没有正确排序的是输入框...但是根据和解规则决定是否刷新页面上的实际DOM元素，新的Virtual DOM子树与之前的虚拟DOM子树进行比较。

现在输入框的“属性”value不是虚拟 DOM 的一部分，除非 React 实际上默默地把它value放入虚拟 DOM 中。

所以当递归地“diff'ing”时，React 应该认为输入框都是一样的。这就是它的工作原理：如果我们使用key={index}，现在 React 将当前虚拟 DOM 子树中的每一列与前一列进行比较，并看到“ID”和“createAt”单元格不同，因此强制刷新实际的 DOM。React 看到的输入框都是一样的，并没有费心去强制刷新实际的 DOM。

但是，如果我们使用key={todo.id}，现在 React 会认为，整行是不同的，因为行“id”已经改变。因此 React 将强制刷新整行的实际 DOM，包括输入框。

所以我们可以说，只有当某些数据不在虚拟 DOM 子树中时才会出现此错误……这很少见，例如在当前情况下。在其他情况下，所有数据都将由render()类组件或return函数组件提供，因此能够告诉 ReactJS，“是的，强制刷新到实际的 DOM”。

这真的是这样吗？

我在 React 中有一个简单的列表渲染示例：

在这里，我使用索引作为键，即使在谷歌中搜索 React 中的键并阅读手册后，我仍然不明白：

remove函数会更改索引，从而更改列表中某些元素的键（因此，如果我删除了 2 号元素的所有键，则它会更改）。

所以我实际上希望这个函数总是删除列表中的最后一项，因为每次只删除这个键，但令人惊讶的是它是否按“应该”的方式工作并且每次都删除正确的元素 - 当我查看 Chrome 中的 React 控制台，我看到它更改了键，但没有删除并再次创建那些键已更改的元素...

我对这里发生的事情感到非常困惑（（⇀‸↼））

我有一个复杂的数据集，所以我将展示一个非常简化的版本作为示例。

输入数据：

数组中的每一项都是可移除的。结果是这样的。

有几个条件。我不应该修改数据数组，所以我创建了一个深层副本。同样在副本内部，我只能删除元素，但不能修改它们的属性。因此，每个元素都必须具有具有新值的本地状态。

工作示例：

如果您尝试删除不是最后一个元素，那么（由于键）输入元素的值将被混淆。我能做些什么呢？

根据 React 文档，他们不建议将键用作索引。但是使用索引和字符串值有什么问题吗？像下面的一样，

这样使用有什么问题吗？

我将列出电影清单并展示它们。每部电影都有一个唯一的值，称为 id，我想用它作为键。
但是会发生错误：index.js:1 警告：列表中的每个孩子都应该有一个唯一的“key”道具。

我不明白这个错误。
当我登录时，结果是这样的。

它被渲染了两次，因为我更改了父组件的 useEffect 中的状态。

我在前端和节点中使用 react，在后端使用 express 和 mongoose。

我已经在文件中创建了一个 key={uniqueid} ，但我仍然收到错误消息。

这是完整的错误：

这是 ArticleCard.js：

这是 CreateArticle.js：

如果您需要任何其他文件来查找问题，我将用它更新我的帖子。

更新：我检查了console.log(uniqueID)。起初，它给了我UNDEFINED但其他时候它给了 ID。即使我检查了数据库中的数据并且它们都有单独的唯一 ID，我也不知道为什么它一开始就具有UNDEFINED 。