React.js에서 배열 자식의 유니크 키 이해하기

JSON 데이터 소스를 받아들이고 정렬 가능한 테이블을 생성하는 React 구성 요소를 만들고 있습니다.
각 동적 데이터 행에는 고유 키가 할당되어 있지만 여전히 다음 오류가 발생합니다.

배열의 각 자식에는 고유한 "키" 소품이 있어야 합니다.
TableComponent의 렌더링 방법을 확인하십시오.

내 TableComponent렌더링 메서드는 다음을 반환합니다.

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

구성 TableHeader요소는 단일 행이며 고유한 키도 할당되어 있습니다.

각 입력 은 고유 키가 있는 구성 요소에서 빌드됩니다 row.rows

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

고유 키 props 오류의 원인은 무엇입니까?

 

 

각 자식 과 children 안의 각 요소 에 키를 추가해야 합니다 .

이런 식으로 React는 최소한의 DOM 변경을 처리할 수 있습니다.

코드에서 각각 <TableRowItem key={item.id} data={item} columns={columnNames}/>은 키 없이 내부의 일부 자식을 렌더링하려고 합니다.

이 예를 확인하십시오 .

div 내부의 요소 key={i}에서 제거를 시도 하고 콘솔을 확인하십시오.<b></b>

샘플에서 요소에 키를 제공하지 않고 만<b> 업데이트하려는 경우 React는 요소만 대신 전체 행을 다시 렌더링해야 합니다.object.city

코드는 다음과 같습니다.

var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];

var Hello = React.createClass({

    render: function() {

      var _data = this.props.info;
      console.log(_data);
      return(
        <div>
            {_data.map(function(object, i){
               return <div className={"row"} key={i}> 
                          {[ object.name ,
                             // remove the key
                             <b className="fosfo" key={i}> {object.city} </b> , 
                             object.age
                          ]}
                      </div>; 
             })}
        </div>
       );
    }
});

React.render(<Hello info={data} />, document.body);

하단 에 @Chris 가 게시한 답변은 이 답변보다 훨씬 더 자세하게 설명되어 있습니다. https://stackoverflow.com/a/43892905/2325522 를 살펴보십시오.