时间戳

首页 > 解决方案 > React Native 中条件渲染的映射

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

问题描述

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

如果我运行控制台日志，例如位置 105，数组中有 5 个，位置 104 有 4 个，位置 101 将有 1，而 106 将有 0。我想让它在 105 中返回 5 个徽标, 4 at 104 1 in 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 个位置与数组相遇，那么对于这个特定的标记位置，它将如下所示：

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

标签： javascriptreactjsreact-nativereact-redux

解决方案

当我们调用时，addSupporters()可以返回一个满足 this.props.supportersGroups.MLSwhere值的对象，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>)
}

推荐阅读