问题标签 [react-key-index]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
267 浏览

reactjs - react-key-index 示例示例不起作用

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

TypeError:Hashids 不是构造函数

链接:react-key-index npmjs

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

应用程序.js:

index.js:

在此处输入图像描述

请问,你知道我在哪里做错了吗?我正在尝试将其设置为全新的反应项目(create-react-app)。从我的角度来看,我已经正确地实现了它(但显然我没有)。以下是该错误在浏览器中的样子: 在此处输入图像描述

0 投票
1 回答
317 浏览

reactjs - useMemo 对键控组件有影响吗?

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

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

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

0 投票
2 回答
86 浏览

reactjs - 在 ReactJS 中,使用数组索引作为 key 据说效果不好,但我不能让它不好用吗?

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

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

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

0 投票
1 回答
250 浏览

reactjs - 反应键 - 在列表中呈现 2 个重复项 - 如何在不使用索引作为键的情况下避免与相同项目相同的键警告?

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

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

0 投票
1 回答
110 浏览

reactjs - 是什么导致输入框文本在 Reconciliation 的 ReactJS 页面示例中没有重新排序?

在 Reconciliation 的 ReactJS 页面中,有两个例子:

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

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

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

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

对比

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

但是当我查看代码时,输​​入框实际上并没有将文本数据添加到状态属性list(数组)中。只有idcreatedAt被添加到每个新条目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”。

这真的是这样吗?

0 投票
0 回答
78 浏览

reactjs - 了解 React 中键的使用

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

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

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

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

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

0 投票
2 回答
49 浏览

javascript - 如果没有机会创建唯一密钥怎么办?

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

输入数据:

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

在此处输入图像描述

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

工作示例:

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

0 投票
2 回答
1755 浏览

javascript - 用字符串和索引反应键

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

这样使用有什么问题吗?

0 投票
1 回答
39 浏览

reactjs - 反应错误独特的“关键”道具。虽然 key 是唯一的

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

我不明白这个错误。
当我登录时,结果是这样的。 在此处输入图像描述

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

0 投票
3 回答
312 浏览

javascript - 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。即使已经设置了密钥

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

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

这是完整的错误:

这是 ArticleCard.js:

这是 CreateArticle.js:

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

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