ReactJS 键未显示

Question

尝试使用 ReactJS 生成表，并且在该表中我想要一个唯一的键来标识每一行（如 ReactJS 推荐的那样）。以下代码运行并生成我想要的表，但出现以下错误：

Warning: 'Each child in an array or iterator should have a unique "key" prop' 

查看我生成的 HTML，“key”字段确实不存在。我也试过 key={index} 但它也不起作用

export class Tablecontent extends Component{

  constructor(props){
    super(props);
    this.state={
      fileinfo:'null'
    }
  }
  render(){
    //const fileinfo = this.props.rows;
    const fileinfo = ['myFile1.doc','myFile2.doc'];
    var row='';
    console.log("FILEINFO:"+fileinfo);
    if(fileinfo=='null')
    {
       row ='';
    }
    else {

     row = fileinfo.map((data,index) =>
    <tr>
      <td key="filename_{index}">{data}</td>
      <td key="date_{index}">2/12/2017</td>
      <td key="size_{index}">2.1 MB</td>
    </tr>
    );
  }
    return(
      <div>
        <table>
        <tbody>
          <tr>
            <th>Name</th>
            <th>Date Created</th>
            <th>Size</th>
          </tr>{row}</tbody>
    </table>
      </div>
    );

  }
}

结果 HTML：

<table>
    <tbody>
    <tr><th>Name</th><th>Date Created</th><th>Size</th></tr>
     <tr><td>myFile1.doc</td><td>2/12/2017</td><td>2.1 MB</td></tr>
    <tr><td>myFile2.doc</td><td>2/12/2017</td><td>2.1 MB</td>
    </tr>
    </tbody>
</table>

Answer 1

它想查看 map 函数中返回的外部元素上的键，如下所示。关键是供 React 内部使用，不会显示在 html 中。

 row = fileinfo.map((data,index) =>
    <tr key={index}>
      <td key="filename_{index}">{data}</td>
      <td key="date_{index}">2/12/2017</td>
      <td key="size_{index}">2.1 MB</td>
    </tr>
    );