Question

我在数组上有一个.map()函数。

当我在.map中执行console.log(object)时，它将记录该对象。
但是当我执行<li key={key}>{object.name}</li>时，它什么也没显示。同样不在检查工具中。

组件：

<StyledImagesList>
    {this.state.images.map((imageObject, key) => {
        // <img src={imageObject.contentUrl} title={imageObject.name} />
        <li key={key}>{imageObject.name}</li>
        {console.log(imageObject)}
    })}
</StyledImagesList>

StyledImagesList没有样式

export const StyledImagesList = styled.ul;

有人知道为什么我的li不会显示吗？

Answer 1

返回<li>回调中的map()元素应该可以解决此问题：

<StyledImagesList>
    { this.state.images.map((imageObject, key) => {
        // <img src={imageObject.contentUrl} title={imageObject.name} />

        /* Logging would need to happen before the return */
        console.log(imageObject);

        /* Add return here */
        return <li key={key}>{imageObject.name}</li>
    }) }
</StyledImagesList>

如果不需要登录到控制台，则可以通过以下更为简洁的方式实现相同的结果：

<StyledImagesList>
    { this.state.images.map((imageObject, key) => <li key={key}>{imageObject.name}</li>) }
</StyledImagesList>

Answer 2

缺少返回。要么

    this.state.images.map((imageObject, key) => {
        return <li key={key}>{imageObject.name}</li>;
    })

或

    this.state.images.map((imageObject, key) => (
        <li key={key}>{imageObject.name}</li>
    ))

Answer 3

Map()在其代码块中使用return以便将每个元素推送到一个NEW数组。它没有碰到原始的。

您在循环中执行的代码实际上确实在运行……只是您没有任何回报。

做

return <li key={key}>{imageObject.name}</li>

将使用这些html元素为您构建一个新数组。

map（）方法创建一个新数组，并为每个数组元素调用一个函数。



map（）方法为数组中的每个元素依次调用提供的函数。



注意： map（）不会对没有值的数组元素执行该功能。



注意： map（）不会更改原始数组。

JS .map函数未显示任何元素

3 个答案: