React Map返回的对象错误作为React子元素无效 [英] react map returned error of Objects are not valid as a React child
问题描述
我无法使用lodash的地图渲染jxs.我的渲染方法中有这个
I failed to render jxs using map of lodash. I have this in my render method
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
结构看起来像这样
But I got error of Objects are not valid as a React child
The groupedByMonths
structure look like this
{
"April": [
{
"price": 0,
},
{
"price": 12
},
{
"price": 200
}
]
}
推荐答案
不知道如何使用lodash map
做到这一点,我可以建议这样做:
Don't know how to do this with lodash map
, i can suggest this:
{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]}
.
When we use Object.keys(groupedByMonths)
it will return an array
that will contain all the keys, and we can use map
on that. To print the key use {obj}
and to print the values use {groupedByMonths[obj]}
.
这篇关于React Map返回的对象错误作为React子元素无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!