javascript - React Native 中条件渲染的映射

Question

我在 React Native 中有一个组件，它涉及 map 和与特定位置相对应的标记。一些标记具有多个应该呈现的项目/图像，而其他标记有一个或没有。我可以让它在每个标记上呈现，但当有多个标记时，我无法让我的项目在标记上呈现。

如果我运行一个控制台日志，例如位置 105，数组中有 5 个，位置 104 有 4 个，位置 101 有 1 个，106 个有 0 个。我想让它返回一个 5 105 中的 Logo 、104 中的 4 个、101 中的 1 个等。

目前我可以让它在每个位置返回 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 等于 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>)
}