React Native 中条件渲染的映射答案

【问题标题】：Mapping of Conditional Rendering in React NativeReact Native 中条件渲染的映射
【发布时间】：2018-12-01 10:20:39
【问题描述】：

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

如果我运行控制台日志，例如位置 105，数组中有 5 个，位置 104 有 4 个，位置 101 将有 1，而 106 将有 0。我想让它返回 5 105 中的徽标、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>

【问题讨论】：

您好，欢迎来到 SO！您可以帮助其他人更好地帮助您，就您想要达到的目标提出一个明确的问题会很有帮助。
嗨，是的，对不起。我试图简洁而不发布我的整个组件。我做了一个更新，希望能更清楚一点。

标签： javascript reactjs react-native react-redux

【解决方案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>)
}

【讨论】：