반응 맵 반환 된 객체의 오류가 반응 자식으로 유효하지 않습니다.

Question

로다시지도를 사용하여 jxs를 렌더링하지 못했습니다. 내 렌더링 방법

return (
    <div> 
    {map(groupedByMonths, (obj, index) => 
     <div className="panel"> 
     <div className="panel-heading"> 
     {obj} 
     </div> 
     <div>{obj.price}</div> 
     </div>)} 
    </div> 
    ) 

이있다 그러나 나는 Objects are not valid as a React child의 오류이가

{ 
    "April": [ 
     { 
      "price": 0, 
     }, 
     { 
      "price": 12 
     }, 
     { 
      "price": 200 
     } 
    ] 
} 

Answer 1

lodash map이 작업을 수행하는 방법을 알고하지 마십시오, 내가이 제안 할 수처럼 groupedByMonths 구조의 모양을 가지고 :

{Object.keys(groupedByMonths).map((obj, index) => 
    <div className="panel"> 
     <div className="panel-heading"> 
      {obj} 
     </div> 
     {groupedByMonths[obj].map((el, i) => <div key={i}> {el.price} </div>)} 
    </div>) 
} 

Object.keys(groupedByMonths)을 사용하면 array이 반환되며 모든 키가 포함됩니다. 그것에 map. 키를 인쇄하려면 {obj}을 사용하고 값을 인쇄하려면 {groupedByMonths[obj]}을 사용하십시오.