Question

我有一个位置数组，试图在页面上显示其值，我使用以下代码遍历该数组：

{this.props.locations && this.props.locations.forEach(loc => {
    console.log("Location: "+loc)
    return(
        <span>Location is: {loc}</span>
    )
})}

页面上的结果为空： enter image description here 但是，它将正确记录该位置： enter image description here

我在App.js中获得this.props.locations的值，如下所示：

 var locations = this.state.cardLists
      var distictLocations = new Set()
      locations.forEach(location => {
        if(!distictLocations.has(location.Location))
        {
          distictLocations.add(location.Location)
        }
      });
     this.setState({
       locations: distictLocations
     })

我不确定自己在做什么错。任何帮助将不胜感激。

Answer 1

.forEach方法仅迭代数组元素，但不返回任何内容。

如果locations是Array，请使用.map：

{
    this.props.locations && this.props.locations.map(loc => {
        console.log("Location: " + loc)
        return (
            <span>Location is: {loc}</span>
        )
    })
}

如果locations是Set，请使用Array.from：

{
    this.props.locations && Array.from(this.props.locations, loc => {
        console.log("Location: " + loc)
        return (
            <span>Location is: {loc}</span>
        )
    })
}

出于性能原因，还建议向映射的元素添加key属性。

反应-在数组中显示项目的问题

1 个答案: