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>)
}