对象的反应映射返回错误作为 React 子级无效

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