ReactJS의 중첩 배열 객체 매핑 값

Question

레코드에 중첩 된 연관 배열을 사용하여 단일 레코드에 대한 데이터 구조로 응답하는 JSON API가 있습니다. API 응답의 예는 다음과 같다 : 나는 "단락"html 태그의 반응 목록에 "바"노드를 매핑 할 노력하고 있어요,하지만 난 어떤 성공이 없었습니다

{ 
    "name":"foo", 
    "bars":[ 
     { 
     "name":"bar1" 
     }, 
     { 
     "name":"bar2" 
     }, 
     { 
     "name":"bar3" 
     } 
    ] 
} 

. here 및 here 본 "Object.keys.map"사용했는데 여전히 데이터 변환 권한을 얻을 수 없습니다.

나는 반응/js에 대해 새롭기 때문에 이것을 달성하는 방법을 모르겠습니다.

Answer 1

// get the <p> virtual DOM element 
const { p } = React.DOM 


// Your data mapped into the <p> element 
// ps :: [ React.DOM ] 
const ps = YourObj.bars.map((b, i) => p({key: i}, b.name)) 
//~> [ <p>bar1</p>, <p>bar2</p>, <p>bar3</p> ] 

이제 어디서나 ps을 사용할 수 있습니다.

Answer 2

bars 응답은 배열입니다. 직접 반복합니다. 배열은 map 방법을 제공합니다.

render() { 
    return (
     <div> 
      {response.bars.map((item, idx) => (
       <p key={idx}>{item.name}</p> 
      ))} 
     </div> 
    ) 
} 

참고 : response는 데이터가 JSON 데이터를 record라는 속성에 저장됩니다 상상 API

Answer 3

로부터받은 것입니다.

const RecordItem = ({ 
    record 
}) => (
    <div> 
    {record.bars.map((bar, index) => (
     <p key={index}>{bar.name}</p> 
    )} 
    </div> 
) 

// Then, put this wherever: 
<RecordItem record={record} /> 

트릭을해야 할 것입니다! 분명히, 당신의 필요에 맞게 수정하십시오.