Question

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

如果我运行控制台日志，例如位置105在阵列中有5个，位置104在4处，位置101将有1，而106将有0。我想使其返回5徽标在105、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>)
}

React Native中条件渲染的映射

1 个答案: