问题标签 [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 投票
1 回答
37 浏览

javascript - 为 JSX 元素节点生成唯一的 id - React

此刻有点头疼。我使用 React 创建了一个测验平台,目前,我有一个问题组件,它使用 ,您可以在其中添加任意数量的 's。但是,当我将测验提交到服务器时,我想让这些答案具有唯一的 ID(还没有那么远)。

在我尝试使用 {this.props.qNo} 的地方出现错误:“this: this '...' expected ts(1005)”

谁能告诉我我做错了什么?可能是我想象的愚蠢的东西!

单个答案组件

AddText问题代码

任何人都可以帮忙吗?

谢谢

0 投票
1 回答
222 浏览

javascript - Reactjs 遇到两个孩子使用相同的键,`NaN`。键应该是唯一的

我尝试了不同的方法来消除遇到两个孩子用相同的钥匙,NaN。键应该是唯一的,这是部分日志:

这基本上是 TableHeader.js 组件的这一点,完整的代码粘贴在此页面的下方:

我已经阅读了有关 keys 和 reactjs 的讨论 ,并遵循了它,但错误仍然没有停止。

以下是渲染数据表所涉及的 3 个组件:

MyDatatable.js 表头.js 动态字段.js
0 投票
0 回答
57 浏览

javascript - 在包装器中反应密钥道具

在查看我们的代码库时,我发现代码看起来有点像这样:

请注意,key道具是 on CarouselItem,而不是CarouselItemWrapper直接从items.map. map这似乎工作正常,并且控制台中没有警告,但它与我在 React 中看到的每个示例背道而驰。

我想知道是否有一个很好的论据(特别是关于性能)来重新排列代码,key如下所示,或者这只是一种风格选择:

旁注:CarouselOuter,CarouselItemCarouselItemWrapper都是,但我怀疑这是否相关。

0 投票
2 回答
54 浏览

reactjs - 反应键如何工作

我读了这篇关于“为什么使用索引作为键是一种反模式”的文章,并且很好奇为什么我的项目在使用基于索引的键矩阵时效果如此之好。

我从事俄罗斯方块项目,每秒钟,具有 20 * 24 单元格的矩阵重新渲染和移动 tetromino。数组的每个单元格都包含字母表,它成为部门的 className 并决定单元格的颜色,并且当 tetromino 移动的每一秒,它都工作得很好。

从他的文章的例子和这个问题中,如果 key 没有改变,react 不会改变那个 DOM 元素并为数组中的新项目添加新的 DOM。所以我的俄罗斯方块阶段不应该更新视图,因为键不会改变。我很困惑反应键是如何工作的。

我搜索了很多文章,但我只能找到它们用于优化和比较 DOM,而不是如何。所以我想知道,key是如何工作的,以及他们在更改Virtual Dom之前和更改Virtual DOM之后做了什么样的程序来比较

0 投票
4 回答
92 浏览

reactjs - ReactJS 不断询问密钥:警告:列表中的每个孩子都应该有一个唯一的“密钥”道具。检查`PostCard`的渲染方法

我不知道为什么即使添加了密钥,仍会继续要求密钥。

我有一个渲染一些帖子的组件,但每个帖子都在它自己的组件中渲染,并且它位于来自Swiper的组件内

我的组件如下所示:

0 投票
2 回答
58 浏览

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

好像是因为map函数中没有输入key值导致报错,但是不知道怎么修改代码。

数组的结构如下:

地图功能部分出现错误。