배열 또는 반복기의 각 자식에는 고유 한 "키"소품이 있어야합니다.

Question

오류가 발생합니다 :

경고 : 배열 또는 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다. 사람이 내가 탐색 구성 요소에 대한

코드 키 넣어야 만 나를 도와주세요 수 : 당신이 JSX를 반환하는지도 기능을 사용할 때마다

var React = require('React'); 
var $ = require('jquery'); 

var Menubar = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [] 
     } 
    }, 
    componentWillMount: function() { 
     var _this = this; 
     this.serverRequest = 
     $.post("/nav", {}, function(result) { 
      _this.setState({ 
       items: result.data 
      }); 
     }) 
    }, 
    render: function() { 
     var item = this.state.items.map(function(data) { 
      var ico = "fa fa-" + data.ico; 
      return (
       <div id={data.sname} className="nav_item"> 
        <div className="nav_icon"> 
          <a href={data.url}> 
           <i className = {ico}> 
           </i> 
          </a> 
        </div> 
       </div> 
     ); 
    }); 
    return (
     <div>{item}</div> 
    ) 
    } 
}) 
module.exports = Menubar; 

Answer 1

React는 가상 DOM을 사용하여 브라우저에 플러시 할 변경 사항이 있는지 확인해야합니다. 이렇게하려면 DOM이 주/소품 변경의 결과로 다음에 변경 될 때 비교할 수 있도록 정확히 어떤 요소인지 알아야합니다. 이 방법은 id를 각 DOM 요소에 할당하고 DOM을 비교하여 변경 사항을 비교합니다.

이 경고 메시지가 표시되는 이유는 루프를 통해 동적으로 생성 된 DOM 요소 세트가있을 때 반응 할 때 어딘가에 반응해야한다고 요구하기 때문입니다. DOM을 다시 렌더링합니다.

root 요소의 key 속성이 필요합니다. 그것의 기본 연습 배열의 index을 사용하지만,이 (read here) 사용하지 않는 것이 좋습니다. 귀하의 케이스에 data.sname을 사용 하시길 권합니다.이 번호는 id에 지정되어 있으므로 고유해야합니다.

귀하의 변화는 당신은 당신의 요소에 대한 고유 키를 지정해야이

// ..other pieces of code 
return (
      <div id={data.sname} key={data.sname} className="nav_item"> 
// ..other pieces of code 

Answer 2

에서 반응을 각각 반환 요소는 순서대로 키 속성을 가져야한다 반응이 최적으로 렌더링되기 때문입니다. 당신은 자세한 내용은 여기를 읽을 수 있습니다 : https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

을 당신은이 라인에서 키 속성을 고수 할 필요가 일반적으로 내가 맵 인덱스를 사용하지만 각 요소는 자신의 고유 ID의 경우, 당신은 대신

<div id={data.sname} className="nav_item" key={index}> 

을 사용할 수 있습니다

다음은 수정 된 코드입니다. 이 도움이

 var item = this.state.items.map(function(data, index) { 
 
      var ico = "fa fa-" + data.ico; 
 
      return (
 
       // ** this element needs a key property ** 
 
       <div id={data.sname} className="nav_item" key={index}> 
 
        <div className="nav_icon"> 
 
          <a href={data.url}> 
 
           <i className = {ico}> 
 
           </i> 
 
          </a> 
 
        </div> 
 
       </div> 
 
     );

희망을 (주석 당신이 실제 JSX에서 그런 의견을 사용할 수 없습니다로 제거 할 필요가 있습니다).

Answer 3

어린이 내부의 각 요소와 각 요소에 key을 추가해야합니다.

이렇게하면 React가 최소한의 DOM 변경을 처리 할 수 ​​있습니다.

render: function() { 
    var item = this.state.items.map(function(data, index) { 
     var ico = "fa fa-" + data.ico; 
     return (
      <div key={index} id={data.sname} className="nav_item"> 
       <div className="nav_icon"> 
         <a href={data.url}> 
          <i className = {ico}> 
          </i> 
         </a> 
       </div> 
      </div> 
    ); 
}); 
return (
    <div>{item}</div> 
) 
} 

Answer 4

비슷한 것입니다. React는 키를 검사하여 요소를 식별하고 비교하여 트리에서 상태 변경이 트리거되었을 때 요소를 다시 렌더링해야하는지 결정합니다.

항목의 색인을 키로 사용하는 것은 모범 사례가 아닙니다. 목록이 수정되면 노드가 목록의 올바른 요소와 더 이상 일치하지 않아 예기치 않은 결과가 발생할 수 있기 때문입니다.

개체를 반복하는 경우 속성 값을 키로 사용하는 것이 좋습니다.사용자를 매핑하고 user.id을 고유 키로 사용하십시오.