理解React.js中数组子数组的唯一键

我正在构建一个React组件，它接受JSON数据源并创建一个可排序的表。每个动态数据行都有一个唯一的键分配给它，但我仍然得到一个错误:

数组中的每个子元素都应该有一个唯一的“key”道具。检查TableComponent的渲染方法。

我的TableComponent渲染方法返回:

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

TableHeader组件是单行，也有一个唯一的键赋给它。

行中的每一行都是由一个具有唯一键的组件构建的:

<TableRowItem key={item.id} data={item} columns={columnNames}/>

TableRowItem看起来是这样的:

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c) {
          return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

是什么导致唯一键道具错误?

当前回答

一个直观的解释。

(数组的)key=index的错误方式

正如你所看到的，标签3、标签2和标签1都被重新渲染了(在元素面板中闪烁)。

正确的方法是key=uniqueId

只有顶部的新元素会闪烁(重新渲染)。

2022-08-20 02:09:09

其他回答

当你对呈现的项目没有稳定的id时，你可以使用项目索引作为关键字作为最后的手段:

const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
   <li key={index}>
      {todo.text}
   </li>
);

请参考列表和键-反应

2021-02-12 10:42:56

列表中的每个子元素都应该有一个唯一的“key”道具。

通过在呈现元素中的key属性中声明index值来解决。

App.js组件

import Map1 from './Map1';

const arr = [1,2,3,4,5];

const App = () => {
  return (
    <>
     
     <Map1 numb={arr} />     

    </>
  )
}

export default App

Map.js组件

const Map1 = (props) => {

    let itemTwo = props.numb;
    let itemlist = itemTwo.map((item,index) => <li key={index}>{item}</li>)

    return (
        <>        
        <ul>
            <li style={liStyle}>{itemlist}</li>
        </ul>
        </>
    )
}

export default Map1

2022-01-14 04:24:55

根据React文档，每一行/项都应该有一个唯一的键。

键帮助React识别哪些项已经更改、添加或删除。

就我个人而言，我更喜欢使用加密接口来生成一个随机UUID: (crypto在vanilla-js中是内置的)

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
  <li key={crypto.randomUUID()}>item {number}
  </li>
);

2023-01-08 02:43:44

下面是React文档，它们很好地解释了Key属性的使用，Key应该在父组件中定义，不应该在子组件中使用。反应文档

2022-05-15 09:46:37

使用UUID lib创建一个随机UUID: 执行NPM install uuid命令

import { v4 as uuid } from "uuid";

array.map((item) =>
  <li key={uuid()}>{item}
  </li>
);

2023-01-18 04:36:03

理解React.js中数组子数组的唯一键

推荐文章

最新文章

标签