地图中的问题映射 - React Native

Posted

技术标签:

【中文标题】地图中的问题映射 - React Native【英文标题】:Issues mapping within a map - React Native 【发布时间】:2020-09-25 08:20:16 【问题描述】:

我正在制作的应用程序开发了以下数组格式来存储用户输入:

[
  name: Bob,
   id: 1,
   sports: [sport: Baseball,
             id: 1
            ,
            sport: Basketball,
             id: 2
            ]
  ,
  name: James,
   id: 2,
   sports: [sport: Hockey,
             id: 3
            ,
            sport: Soccer,
             id: 4
            ]
  
]

我正在尝试渲染它以有效地获得以下输出:

<Text>Bob</Text>
<Text>Baseball</Text>
<Text>Basketball</Text>

<Text>James</Text>
<Text>Hockey</Text>
<Text>Soccer</Text>

我认为我可以通过在地图中进行映射来实现这一点,例如:

Array.map((item) => 
  return(
    <Text>item.name</Text>
    item.sports.map((item2) => 
      return(
        <Text>item2.sport</Text>
      )
    )
  )
)

但无法让这样的事情发挥作用。我可以控制台记录我想要的结果:

    const display = Array.map(item => 
        return console.log(item.name, item.sports.map(item2 => 
            return item2.sport))
        )

但我想我不知道如何渲染出来?

【问题讨论】:

【参考方案1】:

好吧,我刚刚发现我做错了什么哈哈。我需要将我的第一个地图和第二个地图功能中的内容包含在一个视图中。例如:

    const display = Array.map(item => 
        return (
            <View>     <------------------------I didn't have these originally
                <View>
                    <Text>
                        item.name
                    </Text>
                </View>
                item.sports.map(item2 => 
                    console.log(item2)
                    return (
                        <View>
                            <Text>
                                item2.sport
                            </Text>
                        </View>
                    )
                )
            </View>     <------------------------I didn't have these originally
        )
    )

【讨论】:

【参考方案2】:

你的代码有很多错误还是响应者的疏忽。

const userInput = [
  
    name: "Bob",
    id: 1,
    sports: [
       sport: "Baseball", id: 1 ,
       sport: "Basketball", id: 2 ,
    ],
  ,
  
    name: "James",
    id: 2,
    sports: [
       sport: "Hockey", id: 3 ,
       sport: "Soccer", id: 4 ,
    ],
  ,
];

userInput.map((user) => (
  <>
    <Text>user.name</Text>
    user.sports.map((s) => (
      <Text>s.sport</Text>
    ))
  </>
))

【讨论】:

您好,感谢您的回复,我刚刚解决了我的问题并发布了它。这是我在您的回复中没有像“ 和 >”这样的事实。 是的!你想出来的主要事情。 :)

以上是关于地图中的问题映射 - React Native的主要内容,如果未能解决你的问题,请参考以下文章

React Native 映射绘图方向

Typescript 和 React 中的嵌套映射返回错误,此表达式不可调用

React - 将数组映射到子组件

在 React-Native navigationOptions 中处理 OnPress

React - 如何映射嵌套对象值?

React-Leaflet将绘图列表映射到标记