理解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>
    )
  }
});

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

当前回答

您的密钥应该是唯一的。就像一个唯一的id。你的代码应该是这样的

<div>
 {products.map(product => (
   <Product key={product.id}>
    </Product>
    ))}
  </div>

2022-05-02 17:35:11

其他回答

警告:数组或迭代器中的每个子元素都应该有一个唯一的“key”道具。

这是一个警告，因为我们要迭代的数组项需要一个唯一的相似性。

React将迭代组件渲染处理为数组。

更好的解决方法是为你要遍历的数组项提供索引。例如:

class UsersState extends Component
    {
        state = {
            users: [
                {name:"shashank", age:20},
                {name:"vardan", age:30},
                {name:"somya", age:40}
            ]
        }
    render()
        {
            return(
                    <div>
                        {
                            this.state.users.map((user, index)=>{
                                return <UserState key={index} age={user.age}>{user.name}</UserState>
                            })
                        }
                    </div>
                )
        }

index是React内置的道具。

2018-04-28 03:47:28

react中定义唯一键的最佳解决方案: 在映射内部，初始化名称post，然后用key={post定义键。Id}或者在我的代码中，你看到我定义了名称item，然后我定义key by key={item. Id}:

< div className = "容器" > {职位。地图(项= > ( <div className="card border-primary mb-3" key={item.id}> . < div className = " card-header " > {item.name} < / div > <div className="card-body" > < h4 className = " card-title " > {item.username} < / h4 > < p className = "卡片文本" > {item.email} < / p > < / div > < / div > )} < / div >

2020-01-17 11:46:13

我有一个唯一的键，只需要像这样传递它作为道具:

<CompName key={msg._id} message={msg} />

这个页面很有帮助:

https://reactjs.org/docs/lists-and-keys.html#keys

2020-12-14 22:41:48

在我的例子中，将id设置为tag

<tbody key={i}>

问题解决了。

2021-04-14 19:41:12

我不做详细的解释，但这个答案的关键是“关键” 只需将key属性放在标签中，并确保每次迭代时都赋予它唯一的值

#确保键的值不与其他值冲突

例子

<div>
        {conversation.map(item => (
          <div key={item.id  } id={item.id}>
          </div>
        ))}
      </div>

conversation是一个数组，如下所示:

  const conversation = [{id:"unique"+0,label:"OPEN"},{id:"unique"+1,label:"RESOLVED"},{id:"unique"+2,label:"ARCHIVED"},
   ]

2021-09-16 12:09:57

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

推荐文章

最新文章

标签