Как добавить ключи надлежащим образом для этого кода реакции

Question

Я получаю предупреждения о недостающих ключах в GridRow в следующем коде. Я читал об этом, но я не нашел способ применить его к компоненту реакции? Похоже, мне нужно сделать это в конечном методе рендеринга, но у меня нет данных?

var data1 = {"Columns":[{"Title":"Title1","HTMLClass":"g1_Title"},{"Title":"Title2","HTMLClass":"g2_Title"},{"Title":"Title3","HTMLClass":"g3_Title"}],"Rows":[{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]}]}; 


var GridRow = React.createClass({ 
    render: function() { 
     var data = [], columns; 

     if(this.props.columns){ 
      for(var i = 0; i < this.props.columns.length; i++){ 
       data.push({ 
        HTMLclass: this.props.columns[i].HTMLClass, 
        content: this.props.cells[i] 
       }) 
      } 
     } 


     columns = data.map(function(col) { 
      return (
       <div className={col.HTMLclass}>{col.content}</div> 
      ); 
     }.bind(this)); 

     return (
      <li> 
       {columns} 
      </li> 
     ); 
    } 
}); 
var GridHead = React.createClass({ 
    render: function() { 
     if(this.props.data){ 
      var cell = this.props.data.Title; 
      var htmlClass = this.props.data.HTMLClass; 
     } 
     return (
      <div className={htmlClass}>{cell}</div> 
     ); 
    } 
}); 
var GridList = React.createClass({ 
    render: function() { 
     if(this.props.data){ 
      var header = this.props.data.Columns.map(function (columns, i) { 
       return (
        <GridHead data={columns} key={i} /> 
       ); 
      }); 
      var row = this.props.data.Rows.map(function (row, i) { 
       return (
        <GridRow columns={data1.Columns} cells={row.Cells} key={i} /> 
       ); 
      }); 
     } 
     return (
      <ul> 
       <li>{header}</li> 
       {row} 
      </ul> 
     ); 
    } 
}); 


var GridBox = React.createClass({ 
    loadCommentsFromServer: function() { 
     var xhr = new XMLHttpRequest(); 
     xhr.open('get', this.props.url, true); 
     xhr.onload = function() { 
      var data = JSON.parse(xhr.responseText); 
      this.setState({ data: data }); 
     }.bind(this); 
     xhr.send(); 
    }, 
    getInitialState: function() { 
     return { data: this.props.initial }; 
    }, 
    render: function(){ 
     return (
      <GridList data={data1} /> 
     ); 
    } 
}); 

Предупреждение: Каждый ребенок в массиве должен иметь уникальный «ключ» пропеллер. Проверьте метод рендеринга GridRow. См. fb.me/react-warning-keys для получения дополнительной информации.

Answer 1

Просто добавьте ключ в свой разделитель столбцов. Реагировать нужен только уникальный идентификатор, чтобы он мог поддерживать актуальность виртуальной DOM.

Ключ может быть любым, до тех пор, пока он уникален.

columns = data.map(function(col, i) { 
    return (
     <div className={col.HTMLclass}>{col.content} key={i}></div> 
    ); 
}.bind(this));