反应地图功能不渲染

Lz430 发表于 Dev

Lz430

我有一个 map 函数在控制台中返回结果，但是它没有在 DOM 中呈现。

这是我的地图功能：

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。任何见解都是有帮助和赞赏的！

栗山

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。