反應映射返回錯誤的對象作爲反應子女無效

Question

我無法使用lodash地圖渲染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錯誤groupedByMonths結構看起來像這樣

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

Answer 1

不知道如何與lodash map做到這一點，我可以建議是：

{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]}。