[英]Nested map in react native
大家好,我是 React Native 的新手,我正在尝试创建包含详细信息的下拉列表。 下面是我的代码,第一个数组值正在显示,但经验数组值未显示请帮助我解决这个问题。
import React from "react";
import { StatusBar } from "expo-status-bar";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
const data = [
{
name: "Jude",
position: "Developer",
experiences: [
{
id: 0,
job: "React UI Developer",
period: "2017-2018",
description:
"I love Creating beautiful Smart UI with React js and styled components",
},
{
id: 1,
job: "React/ Redux UI Developer",
period: "2017-2018",
description:
"I love Creating beautiful Smart UI with React js and styled components",
},
],
},
{
name: "Mikes",
position: "Developer",
experiences: [
{
id: 0,
job: "React UI Developer",
period: "2017-2018",
description:
"I love Creating beautiful Smart UI with React js and styled components",
},
{
id: 1,
job: "React/ Redux UI Developer",
period: "2017-2018",
description:
"I love Creating beautiful Smart UI with React js and styled components",
},
],
},
];
function ExpandList(props) {
return (
<View style={styles.container}>
{data.map(({ name, position, experiences }) => {
return (
<View>
<Text>{name}</Text>
{experiences.map((checkaa) => {
<Text key={checkaa.id}>{checkaa.job}</Text>;
})}
</View>
);
})}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
},
mainList: {},
subCategoryTwo: {
fontSize: 90,
},
});
export default ExpandList;
当我尝试获得经验数组值时,它什么也没显示,有一天我陷入了这个问题。
您的第二个 map 缺少 return 关键字,因此我将其修改如下:
function ExpandList(props) {
return (
<View style={styles.container}>
{data.map(({ name, position, experiences }) => {
return (
<View>
<Text>{name}</Text>
{experiences.map((checkaa) =>{
return <Text key={checkaa.id}>{checkaa.job}</Text>
})}
</View>
);
})}
</View>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.