可以't将函数的输出用作react原生元素

Question

已解决(一个愚蠢的错误，请检查答案(

目前，我正在将我的应用程序从ReactJS重写为React Native，我遇到了一个通过函数返回<View><Text>元素的问题。这是我的代码：

import * as Font from "expo-font";
import React, { useState } from "react";
import { AppLoading } from "expo";
import {
Text,
View,
SafeAreaView,
ScrollView,
} from "react-native";
import styles from "./styles.js";
import lessonPlan from "./lessonPlan.json";
const getFonts = () => {
return Font.loadAsync({
"jaapokki-regular": require("./assets/fonts/jaapokki-regular.ttf"),
"jaapokki-enchance": require("./assets/fonts/jaapokkienchance-regular.ttf"),
"jaapokki-substract": require("./assets/fonts/jaapokkisubtract-regular.ttf"),
});
};
function OneLesson(props) {
const { elementData } = props;
const {
noLessonsInTheSameTime,
beginningTime,
endingTime,
subjectName,
roomNumber,
} = elementData;
function moreLessons() {
switch (noLessonsInTheSameTime) {
case 1:
return (
<View style={styles.centerContent}>
<Text style={styles.subject}>{subjectName[0]}</Text>
</View>
);
case 2:
return (
<View style={styles.centerContent}>
<Text style={styles.subject}>{subjectName[0]}</Text>
<Text style={styles.subject}>{subjectName[1]}</Text>
</View>
);
default:
return (
<View style={styles.centerContent}>
<Text style={styles.subject}>{subjectName[0]}</Text>
</View>
);
}
}
function moreRooms() {
switch (noLessonsInTheSameTime) {
case 1:
return (
<View style={styles.sideContent}>
<Text style={styles.room}>{roomNumber[0]}</Text>
</View>
);
case 2:
return (
<View style={styles.sideContent}>
<Text style={styles.room}>{roomNumber[0]}</Text>
<Text style={styles.room}>{roomNumber[1]}</Text>
</View>
);
default:
return (
<View style={styles.sideContent}>
<Text style={styles.room}>{roomNumber[0]}</Text>
</View>
);
}
}
return (
<View style={styles.container}>
<View style={styles.sideContent}>
<Text style={styles.beginningHour}>{beginningTime}</Text>
<Text style={styles.endingHour}>{endingTime}</Text>
</View>
{moreLessons()}
{moreRooms()}
</View>
);
}
function generateCard() {
lessonPlan[0][0][1].map((el, i) => <OneLesson elementData={el} key={i} />);
}
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return (
<SafeAreaView style={styles.main}>
<View style={styles.bottom}>
<ScrollView
style={styles.scrollBox}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={true}
decelerationRate={0.956}
fadingEdgeLength={35}
>
<View style={styles.center}>{generateCard()}</View>
</ScrollView>
</View>
</SafeAreaView>
);
} else {
return (
<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
);
}
}

我尝试了几件事，上面的代码就是结果。我还尝试将这个函数切换到class App，但也没有成功。

唯一有效的方法是将映射函数嵌套到呈现方法中的最终返回调用中：

return (
<SafeAreaView style={styles.main}>
<View style={styles.bottom}>
<ScrollView
style={styles.scrollBox}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={true}
decelerationRate={0.956}
fadingEdgeLength={35}
>
<View style={styles.center}>
{
<View style={styles.center}>
{lessonPlan[0][0][1].map((element) => (
<View style={styles.container}>
<View style={styles.sideContent}>
<Text style={styles.beginningHour}>
{element.beginningTime}
</Text>
<Text style={styles.endingHour}>
{element.endingTime}
</Text>
</View>
<View style={styles.centerContent}>
<Text style={styles.subject}>
{element.subjectName[0]}
</Text>
</View>
<View style={styles.sideContent}>
<Text style={styles.room}>{element.roomNumber[0]}</Text>
</View>
</View>
))}
</View>
}
</View>
</ScrollView>
</View>
</SafeAreaView>
);

但这不是让我满意的方式，因为这个问题，我在未来的行动中受到限制

Answer 1

您不会从函数返回。

function generateCard() {
// add return here
return lessonPlan[0][0][1].map((el, i) => <OneLesson elementData={el} key={i} />);
}