问题标签 [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.
reactjs - react-key-index 示例示例不起作用
reactjs - useMemo 对键控组件有影响吗?
当使用动态数量的组件时,React 要求开发人员提供一个唯一的键,以免抛出这个错误:
列表中的每个孩子都应该有一个唯一的“关键”道具
假设每个孩子根据某个道具显示不同的图标和标签。这里的使用useMemo
对性能有影响吗?
reactjs - 在 ReactJS 中,使用数组索引作为 key 据说效果不好,但我不能让它不好用吗?
如果我使用索引作为键,我不能让它无法正常工作。唯一的方法是如果我改变数组并使用索引作为键。但是由于文档说不要改变状态(数组),所以如果是这样的话,我不能让它不能很好地工作,这与文档所说的相反。我怎样才能证明它可能会破裂?
如果我改变状态,我可以让它中断,文档说不应该这样做:
但是如果我改变状态并使用索引作为键,我什至不能打破它,如果它是一个类组件:
reactjs - 反应键 - 在列表中呈现 2 个重复项 - 如何在不使用索引作为键的情况下避免与相同项目相同的键警告?
我有一个项目画廊。记忆卡游戏的 2 个项目总是相同的(记住 2 个匹配的图像)。现在,如果我通过映射,我会得到每个孩子都应该拥有唯一键的错误,因为我将 id 作为键。然而,我渲染的 2 个项目是完全相同的。我看到的唯一方法是将索引作为键,这不好。
我如何在不传入 index.html 的情况下做到这一点?
reactjs - 是什么导致输入框文本在 Reconciliation 的 ReactJS 页面示例中没有重新排序?
在 Reconciliation 的 ReactJS 页面中,有两个例子:
截至 2020 年 2 月 18 日,尚不清楚如何在页面上重现该问题。我尝试了几次单击“添加新的开始”或“结束”并重新排序列表,它们似乎工作正常。直到后来我才发现你需要在框中输入一些文本,然后只需“Add New to End”,然后重复三遍,然后重新排列列表。
在第一个示例中,输入框中的文本没有重新排序。在第二个示例中,输入框中的文本按预期重新排序。
这两个程序的不同之处在于使用
对比
在两个版本之间还有一些稍微重新排序的代码和使用todoCounter
vs toDoCounter
(capital D
),我想知道为什么,React 团队可能会在以后修复它。但是您可以将第一个版本从key={index}
to修改key={todo.id}
,您也可以看到问题已解决。
但是当我查看代码时,输入框实际上并没有将文本数据添加到状态属性list
(数组)中。只有id
和createdAt
被添加到每个新条目list
。
因此,虽然我们可以说使用key={todo.id}
解决了问题,但首先是什么导致了问题?
您可以说id
andcreatedAt
已正确排序。没有正确排序的是输入框...但是根据和解规则决定是否刷新页面上的实际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”。
这真的是这样吗?
reactjs - 了解 React 中键的使用
我在 React 中有一个简单的列表渲染示例:
在这里,我使用索引作为键,即使在谷歌中搜索 React 中的键并阅读手册后,我仍然不明白:
remove函数会更改索引,从而更改列表中某些元素的键(因此,如果我删除了 2 号元素的所有键,则它会更改)。
所以我实际上希望这个函数总是删除列表中的最后一项,因为每次只删除这个键,但令人惊讶的是它是否按“应该”的方式工作并且每次都删除正确的元素 - 当我查看 Chrome 中的 React 控制台,我看到它更改了键,但没有删除并再次创建那些键已更改的元素...
我对这里发生的事情感到非常困惑((⇀‸↼))
javascript - 用字符串和索引反应键
根据 React 文档,他们不建议将键用作索引。但是使用索引和字符串值有什么问题吗?像下面的一样,
这样使用有什么问题吗?
javascript - 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。即使已经设置了密钥
我在前端和节点中使用 react,在后端使用 express 和 mongoose。
我已经在文件中创建了一个 key={uniqueid} ,但我仍然收到错误消息。
这是完整的错误:
这是 ArticleCard.js:
这是 CreateArticle.js:
如果您需要任何其他文件来查找问题,我将用它更新我的帖子。
更新:我检查了console.log(uniqueID)。起初,它给了我UNDEFINED但其他时候它给了 ID。即使我检查了数据库中的数据并且它们都有单独的唯一 ID,我也不知道为什么它一开始就具有UNDEFINED 。