Fatal编程技术网
  • reactjs/
  • Reactjs 错误：不在键中使用数组索引

Reactjs 错误：不在键中使用数组索引

reactjs npm

Reactjs 错误：不在键中使用数组索引,reactjs,npm,Reactjs,Npm,我正在使用索引生成列表中的键。但是，es lint会为相同的错误生成一个错误。React还指出，使用项索引作为键应作为最后手段 const list = children.map((child, index) => <li key={index}> {child} </li>); const list=children.map（（child，index）=> {child}）； 我考虑使用react键索引。 npm安装反应键索引给出以下错误： npm错误

我正在使用索引生成列表中的键。但是，es lint会为相同的错误生成一个错误。React还指出，使用项索引作为键应作为最后手段

const list = children.map((child, index) =>
    <li key={index}> {child} </li>);

const list=children.map（（child，index）=>

  • {child}
    • ）；
    我考虑使用
    react键索引
    。 
    npm安装反应键索引
    给出以下错误：

    npm错误！代码E404

    npm错误！404未找到：反应键-index@latest

    对于允许生成唯一密钥的其他包，是否有任何建议？欢迎对react密钥生成器提出任何建议

    当您使用数组的索引作为键时，React将进行优化，而不会按预期进行渲染。在这种情况下会发生什么可以用一个例子来解释

    假设父组件获得一个包含10项的数组，并基于该数组呈现10个组件。假设第5项随后从数组中移除。在下一次渲染时，父级将接收9个项目的数组，因此React将渲染9个组件。这将显示为第10个组件被删除，而不是第5个，因为React无法根据索引区分项目

    因此，始终使用唯一标识符作为从项目数组呈现的组件的键

    您可以使用子对象中唯一的任何字段作为键来生成自己的唯一键。正常情况下，可以使用子对象的任何id字段（如果可用）

    编辑：只有在组件创建和管理自己的状态时，您才能看到上面提到的行为，例如，在不受控制的文本框、计时器等中。例如，

    使用
    键={index}的问题
    每当修改列表时都会发生。    React不知道添加/删除/重新排序了哪个项目，因为索引是根据数组中项目的顺序在每个渲染中给出的。虽然通常情况下渲染效果良好，但仍有失败的情况

    下面是我在构建带有输入标记的列表时遇到的示例。一个列表基于索引呈现，另一个列表基于id呈现。每次在输入中键入任何内容，然后删除该项时，都会出现第一个列表的问题。重新渲染时，React仍显示为该项仍然存在。这是Donot使用数组索引作为键，这是React团队在其报告中指出的反模式

    这是性能和状态管理的问题。第一种情况适用于将某些内容附加到列表顶部的情况。考虑一个例子：

    <ul>
  <li>Element1</li>
  <li>Element2</li>
  <li>Element3</li>
</ul>

      

    • 要素1
      • 

    • 元素2
      • 

    • 元素3
      •
    现在，假设您想将新元素添加到列表的顶部/底部，然后对列表进行重新排序或排序（甚至最糟糕的是，在中间添加一些东西）。所有基于
    索引
    的
    键
    策略都将崩溃。
    索引
    在一段时间内会有所不同，如果每个元素都有一个唯一的
    id
    ，则情况并非如此

    代码笔：

    • 使用索引作为键：
    • 将ID用作密钥：
    玩玩它，你会发现在某个时刻，基于
    索引的
    键
    策略正在丢失。
    使用以下库“react uuid”：
    
react uuid基本上是在每次调用时创建随机ID
    

    import React from 'react'
import uuid from 'react-uuid'

const array = ['one', 'two', 'three']

export const LineItem = item => <li key={uuid()}>{item}</li>

export const List = () => array.map(item => <LineItem item={item} />)

    

    从“React”导入React
从“反应uuid”导入uuid
常量数组=['1'，'2'，'3']
export const LineItem=item=>
  • {item}
    • 
导出常量列表=（）=>array.map（项=>）

    

    当然，在React中，需要为数组的所有元素传递唯一的键值。否则，您将在控制台中看到此警告
    

    Warning: Each child in an array or iterator should have a unique “key” prop.

    
因此，作为一个懒惰的开发人员，您只需将循环的索引值作为子元素的键值传入即可
    
当索引用作键时，重新排序列表或从列表中添加和删除项可能会导致组件状态出现问题。如果键是索引，则对项重新排序会更改它。因此，组件状态可能会混淆，并且可能会对不同的组件实例使用旧密钥
    
使用索引作为键是安全的，有哪些例外情况
    

      

    • 如果您的列表是静态的，并且不会更改
      • 

    • 该列表将永远不会重新排序
      • 

    • 将不会筛选列表（从中添加/删除项目
名单）
      • 

    • 列表中的项目没有ID
      • 

    

    键应该是唯一的，但只能在其同级中使用。
    您的对象在
    子对象中是什么样子的？他们是否有一个ID，或者任何类型的数据可以散列以生成唯一的ID？如果列表从未重新排序（包括“插入”或“删除”之类的操作），那么索引是完全正确的。还有其他用例，例如在滚动上加载，下一页实际上可以包含相同的项目（具有相同的ID）。在这种情况下，使用索引优于使用标识符。实际上，在大多数情况下，索引是完全正确的，因为部分更新不会发生在每个组件中。在这种情况下，列表将使用唯一键（超过索引值）重新排序以提高性能。如果你使用一个索引，并且你的数组值四处游移，那么索引就不再是唯一的，并且不能以最佳方式区分对象。我不遵循这个示例-你能提供一个重现这个问题的工作示例吗？我经常使用数组，从未遇到过此类问题。@lux可能我无法正确解释。希望这个链接能有所帮助。有一秒钟，我以为我的光标自己在移动，下面是发生的情况。我在上面的代码中又添加了两项。当您从“key is index”列表顶部删除第一个项时，新创建的3个项的数组将具有0、1、2键。删除之前，初始数组键为0、1、，