[英]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.