중첩된 React 배열의 고유 키 오류를 해결하는 방법은 무엇입니까?

React.js의 배열 하위 항목에 대한 고유 키 이해

문제:

A React 중첩 배열을 사용하여 정렬 가능한 테이블을 생성하는 구성 요소에 고유 키가 부족함을 나타내는 오류가 발생했습니다.

분석:

이 문제를 해결하려면 배열 내의 각 직계 하위 항목과 해당 하위 항목에 포함된 각 요소에 독특한 키 소품. 이를 통해 React는 렌더링 중에 DOM의 필요한 부분만 효율적으로 업데이트할 수 있습니다.

해결책:

제공된 코드에서 TableRowItem 구성 요소는 하위 요소를 렌더링하려고 합니다. 키를 지정하지 않고. 이를 수정하려면 다음과 같이 TableRowItem 내의 각 하위 td 요소에 고유 키를 할당하십시오.

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

예:

@Chris의 응답에서 조정된 다음 예를 고려하세요. 이는 중첩된 키의 중요성을 보여줍니다. 요소:

const ExampleComponent = React.createClass({
  render: function () {
    const infoData = this.props.info;
    return (
      <div>
        {infoData.map((object, i) => {
          return (
            <div className={"row"} key={i}>
              {[
                object.name,
                // Assign unique key to <b> element
                <b className="fosfo" key={i}>
                  { " " }
                  {object.city}{ " " }
                </b>,
                object.age,
              ]}
            </div>
          );
        })}
      </div>
    );
  },
});

추가 참고:

항상 배열 구조의 직계 하위 항목에 고유 키를 할당하는 것이 중요합니다. 이를 통해 React는 필요한 DOM 요소만 최적으로 업데이트하여 성능과 렌더링 효율성이 향상됩니다.

참조:

• [React 문서: 키]( https://reactjs.org/docs/lists-and-keys.html)

위 내용은 중첩된 React 배열의 고유 키 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!