React에서 객체 배열을 렌더링하는 방법은 무엇입니까?

React에서 객체 배열 렌더링

쿼리는 React에서 객체 목록을 렌더링하려는 시도를 보여줍니다. 그러나 render() 메서드 내에 필요한 return 문이 누락되었습니다. 이 문제를 해결하고 포괄적인 솔루션을 제공하겠습니다.

해결책:

React에서 객체 배열을 렌더링하려면 두 가지 접근 방식이 있습니다.

방법 1: 출력을 변수에 저장

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
}</code>

방법 2: 반환에 맵 함수 직접 작성

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
}</code>

에서 두 방법 모두 데이터가 요소 목록에 매핑됩니다. 각 요소에는 React에서 요구하는 대로 고유한 키 속성이 할당됩니다. 이 키는 효율적인 재렌더링을 보장하고 각 목록 항목의 ID를 유지합니다.

이러한 솔루션은 React에서 객체 배열을 렌더링하는 안정적이고 유연한 방법을 제공합니다.

위 내용은 React에서 객체 배열을 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!