React.js의 배열 자식에 대한 고유 키 이해

질문 : 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>
    )
  }
});

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

답변

---

각 하위 항목과 children 내부의 각 요소에 키를 추가해야합니다.

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

코드에서 각 <TableRowItem key={item.id} data={item} columns={columnNames}/> 는 키없이 일부 하위 항목을 렌더링하려고합니다.

이 예를 확인하십시오.

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

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

다음은 코드입니다.

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를 살펴보십시오.

조정에서 키의 중요성에 대한 React 문서 : 키

출처 : https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js