React Native中条件渲染的映射

Question

我在React Native中有一个组件，其中涉及对应于某些位置的地图和标记。 有些标记具有应该渲染的多个项目/图像，而另一些则没有或只有一个。 我可以使它在每个标记上呈现，但是当有多个标记时，我无法使我的项目在标记上呈现。

如果运行控制台日志，例如位置105数组中有5个，位置104中有4个，位置101中将有1个，而位置106中将有0个。我要创建它以便在105中返回5个徽标，4在104 1在101中，依此类推。

目前，我可以在每个位置返回它来返回Hello文本，但这不是我要尝试的操作。 我在条件映射方面遇到麻烦。

 addSupporters(markerLocation, teamImages){ var teamLogos = [] for (i = 0; i < this.props.supportersGroups.MLS.length; i++) { if (this.props.supportersGroups.MLS[i].homebar == markerLocation.MapMarker.id){ teamLogos.push(this.props.supportersGroups.MLS[i]) return( <View> <Text>{this.props.supportersGroups.MLS[i].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[i].id]} /> </View> ) } } } 

当前它将渲染第一个满足条件的项目，但是我希望它渲染所有符合条件的项目。 因此，只要this.props.supportersGroups.MLS [i] .homebar等于markerLocation.MapMarker.id，就会将它们添加到teamLogos数组中，然后对该数组进行映射。 因此，如果有3个符合阵列的位置，则此特定markerLocation的外观如下：

  <View> <Text>{this.props.supportersGroups.MLS[0].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[0].id]} /> <Text>{this.props.supportersGroups.MLS[4].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[4].id]} /> <Text>{this.props.supportersGroups.MLS[6].name}</Text> <Image style={{width: 25, height: 25}} source={teamImages[this.props.supportersGroups.MLS[6].id]} /> </View> 

Answer 1

当我们调用addSupporters()可以返回满足以下条件的对象： this.props.supportersGroups.MLS ，其中Groups.MLS[i].homebar is equal to the markerLocation.MapMarker.id并传递此数组以显示。 为此，您的addSupporters功能如下：

addSupporters(markerLocation, teamImages){
    var teamLogos = []
    this.props.supportersGroups.MLS.filter((mls)=>mls.homebar == markerLocation.MapMarker.id)
      }     
    }
    return teamLogos;
  }

然后在渲染器中使用正确的参数调用addSupporters() ，

render(){
let teamLogos = addSupporters(markerLocation, teamImages)
return(
...
{
   teamLogos.map((logo)=><View>
        <Text>{logo.name}</Text>
        <Image
          style={{width: 25, height: 25}}
          source={logo.id]}
        />
      </View>)
}