JS .map函数没有显示任何元素

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，以便将每个元素推送到一个新数组。它没有碰到原来的那个。

你在循环中执行的代码实际上是在运行...这只是因为你没有得到任何东西作为回报。

干

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

将为您构建一个包含这些html元素的新数组。

• map（）方法创建一个新数组，其结果是为每个数组元素调用一个函数。
• map（）方法按顺序为数组中的每个元素调用一次提供的函数。
• 注意：map（）不会为没有值的数组元素执行函数。
• 注意：map（）不会更改原始数组。