arrays - 地图中的问题映射 - React Native
问题描述
我正在制作的应用程序开发了以下数组格式来存储用户输入:
[
{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>
)
})
)
})}
但不能让这样的事情起作用。我可以 console.log 我想要的结果:
const display = Array.map(item => {
return console.log(item.name, item.sports.map(item2 => {
return item2.sport}))
})
但我想我不知道如何渲染出来?
解决方案
您的代码中有很多错误,或者是响应者的忽视。
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>
))}
</>
))}
推荐阅读
- sockets - 在 Flutter 中显示图像,通过套接字连接发送
- javascript - 循环画廊使用 next() 和 prev() 方法的问题 - javascript / jQuery
- c# - 使用承载令牌验证 MVC 控制器并重定向到控制器
- android - 如何通过添加部分来重构 Android Studio 上的 Android 包名称?
- canvas - 使用 Fabricjs 渲染一条跟随鼠标的线最终会减慢画布上的多条线
- cordova - cordova-plugin-crypt-file - requireCordovaModule 错误
- google-sheets - 如何将 MID 函数应用于 Google 表格中的范围或列
- javascript - 试图选择 ul 的选定 li 元素的前一个 li 元素
- java - 从 Array 获取元素时出现 NullPointerException
- excel - 如何在 Excel VBA 中计算公式并将其值放入变量中?例如我想设置 x 等于 COUNTA(Sheet1!A:A)