[英]How can I return a div from forEach inside map function?
I am building a new component in React to display filters.我正在 React 中构建一个新组件来显示过滤器。 My filter data looks like this:
我的过滤器数据如下所示:
{countries: [0: {value: 'England'}, 1: {value: 'Australia'}], continents: []}
In my render function I want to return a div for each value inside an object (England, Australia).在我的渲染函数中,我想为对象(英格兰、澳大利亚)内的每个值返回一个 div。 Currently, I don't get anything rendered to the Dom.
目前,我没有得到任何渲染到 Dom 的东西。
render() {
const {i18n, t} = this.props;
return <div className={'filter'}>
<ul className={'filter-list'}>
{
Object.keys(this.props.filters).map(i => {
this.props.filters[i].forEach(
element => {
console.log('element', element)
return <p>{element.value}</p>
}
)
})
}
</ul>
</div>;
}
Does anyone know how I could achieve this/return the value properly?有谁知道我怎样才能实现这个/正确返回值?
forEach
does not return anything. forEach
不返回任何内容。 You'll need to use map
instead:您需要使用
map
代替:
{
Object.keys(this.props.filters).map((i) => {
// Switched to .map and added `return`
return this.props.filters[i].map((element) => {
return <p>{element.value}</p>;
});
});
}
This code will create a 2 dimensional array of elements, but react supports that.此代码将创建一个二维元素数组,但 react 支持。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.