独特的“钥匙”托警告在渲染方法 - ReactJS

我的应用程序有一个警告说：Each child in an array or iterator should have a unique "key" prop. Check the render method of 'SortableTable'听到的是我的SortableTable文件：独特的“钥匙”托警告在渲染方法 - ReactJS

import React from 'react'; 
import {Link} from 'react-router'; 
import {v4 as uuid} from 'node-uuid'; 

export default class SortableTable extends React.Component { 
    render() { 

     return (
      <table style={{width: '100%'}} className={this.props.className} id={this.props.id}> 
       <thead> 
        <tr> 
         {this.props.headers.map(this.generateHeaders)} 
        </tr> 
       </thead> 
       <tbody> 
        {this.props.children} 
       </tbody> 
      </table> 
     ); 
    } 

    generateHeaders = (value) => { 
     if (Object.keys(value).length === 0) return 
     let sort, colspan 
     if(value.sort) { 

      let {query} = this.props; 
      let nQuery, title, icon, colspan = 1; 
      if(query.sort === value.sort && query.sortDirection === 'desc') { 
       nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'asc', page: 1}) 
       title = 'asc'; 
       icon = String.fromCharCode(0xe630) 
      } else { 
       nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'desc', page: 1}) 
       title = 'desc'; 
       icon = String.fromCharCode(0xe62d) 
      } 
      sort = <Link to={this.props.link} query={nQuery} className="icon order active" title={title} data-icon={icon} /> 

     } 
     let className = value.className ? value.className : '' 
     if(value.colspan) { 
      colspan = value.colspan 
     } 
     return <th className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> 
    }

有人能告诉我如何设置关键道具解决此警告？

来源

2016-07-05 vietanhyt

感谢@Pavlo，Tom Fenech和Oleg Kutsenko（为什么我无法标记所有名称），我的问题已解决！ :)） – vietanhyt

对于这个问题对未来的访问者更有帮助，请接受您最喜欢的答案（每个答案左侧都有一个勾号）。你也会从中获得一些声誉。 – Pavlo

这里所有的答案都是正确的。：D 但我还有一个问题[与上面的SortableTable文件的同一目录中的另一个文件有关]。我不想发表一个新的问题，因为它与主要问题类似 - 缺少关键道具。我在[这里]发布了文件内容（http://textuploader.com/5i66s）请帮助我！我试图添加索引参数，但它没有工作！ – vietanhyt

这个想法是有一个唯一值的关键属性。您可以使用index, the second argument of Array#map callback：

generateHeaders = (value, index) => { 
    // ... 
    return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> 
}

或者，如果value对象具有类似于id一个独特的属性，你可以用它来代替。

来源

2016-07-05 10:43:46 Pavlo

你应该插入钥匙插入个标签：

generateHeaders = (value, index) => { ... return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> }

来源

2016-07-05 10:45:32 inthedark122

我试图设置任何与'Object'或'value'有关的东西作为'td'标签中的键，但它不起作用。我已经尝试过你，这似乎是好的！ – vietanhyt

你应该只设置唯一的'key'。如果你尝试设置重复密钥，你的下一个重复组件将会消失 – inthedark122

通过generateHeaders需要返回的<th>元件获得key属性设置就可以了，因为你从你的render方法的返回他们的数组。

实现这一目标的最简单方法是使用索引：

generateHeaders = (value, index) => { 
// ... 
    return <th key={index} //...

这将使警告消失，但它是更好地使用每个value的独特性质，如果存在的话。这是因为React使用密钥来确定两个项目是否相同。如果您正在使用数组索引并在数组中插入一个新值，索引将会更改，导致项目不必要地重新渲染。

来源

2016-07-05 10:46:54

独特的“钥匙”托警告在渲染方法 - ReactJS

回答

相关问题