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

时间:2019-04-12 11:48:13

标签: javascript reactjs

我在数组上有一个.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不会显示吗?

3 个答案:

答案 0 :(得分:2)

返回<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>

答案 1 :(得分: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>
    ))

答案 2 :(得分:0)

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

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

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

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

  
      
  • map()方法创建一个新数组,并为每个数组元素调用一个函数。

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

  •   
  • 注意: map()不会对没有值的数组元素执行该功能。

  •   
  • 注意: map()不会更改原始数组。

  •