[英]React map function not rendering
I have a map function that is returning results in the console, however it's not rendering in the DOM. 我有一个map函数,该函数在控制台中返回结果,但是它不在DOM中呈现。
Here is my map function: 这是我的地图功能:
const featuredMakes = makes.filter(makes => makes.featured === true);
var featured = Object.keys(featuredMakes).map(function(s){
console.log(featuredMakes[s].title);
return (
<Col className="mb-3">
<Link
key={featuredMakes[s].title}
href={{ pathname: '/deal-list', query: query }}
as={{ pathname: '/filter', query: query }}
passHref
>
<a>
<img
style={{ height: '80px', width: '80px' }}
src={featuredMakes[s].logo}
alt={featuredMakes[s].title + ' logo'}
/>
</a>
</Link>
</Col>
);
});
And here is what's in my render call: 这是我的渲染调用中的内容:
<Row>{this.renderFeaturedMakes(makes)}</Row>
The console is showing me everything correctly, however nothing is showing in the DOM. 控制台向我正确显示了所有内容,但是DOM中没有任何显示。 I am still learning React and ES2016.
我还在学习React和ES2016。 Any insight is helpful and appreciated!
任何见解都是有益的,值得赞赏!
The solution to show them on the browser is to add return
statement in renderFeaturedMakes
method. 在浏览器上显示它们的解决方案是在
renderFeaturedMakes
方法中添加return
语句。 Otherwise this method doesn't return nothing. 否则,此方法将不返回任何内容。
And if you want to write them in ES2016, it might help you. 而且,如果您想在ES2016中编写它们,可能会对您有所帮助。
const featuredMakes = makes.filter(makes => makes.featured === true);
const featured = Object.keys(featuredMakes).map(s => (
<Col className="mb-3">
<Link
key={featuredMakes[s].title}
href={{ pathname: '/deal-list', query: query }}
as={{ pathname: '/filter', query: query }}
passHref
>
<a>
<img
style={{ height: '80px', width: '80px' }}
src={featuredMakes[s].logo}
alt={featuredMakes[s].title + ' logo'}
/>
</a>
</Link>
</Col>
));
return featured;
// or just return instead of inserting `featured` variable
// return Object.keys(featuredMakes).map(s => {
I ended up getting it. 我最终得到了它。 I was returning from a var, when I needed to return directly.
当我需要直接返回时,我是从var返回的。 Line 2 from above:
上方的第2行:
return Object.keys(featuredMakes).map(function(s){
// console.log(featuredMakes[s]);
return (
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.