gpt4 book ai didi

javascript - React map 功能不渲染

转载 作者:行者123 更新时间:2023-12-03 00:44:36 33 4
gpt4 key购买 nike

我有一个 map 函数,它在控制台中返回结果,但它不在 DOM 中渲染。

这是我的 map 功能:

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>
);
});

这是我的渲染调用中的内容:

<Row>{this.renderFeaturedMakes(makes)}</Row>

控制台正确地向我显示了所有内容,但是 DOM 中没有显示任何内容。我还在学习 React 和 ES2016。任何见解都是有帮助和赞赏的!

最佳答案

在浏览器上显示它们的解决方案是在 renderFeaturedMakes 方法中添加 return 语句。否则此方法不会返回任何内容。

如果你想在 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 => {

关于javascript - React map 功能不渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53301204/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com