嵌套<Text>标签未出现在 React Native 应用程序中

Question

我正试图使用Javascript在React Native应用程序上有条件地呈现一些文本，但由于某种原因，它没有出现。

下面是我的代码：

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import firebase from '../firebase/firestore';

class FormBuilder extends React.Component {
constructor() {
super();
this.firestoreRef = firebase.firestore().collection('Forms');
this.state = {
isLoading: true,
formArr: []
};
}
componentDidMount() {
this.unsubscribe = this.firestoreRef.onSnapshot(this.getCollection);
}
componentWillUnmount(){
this.unsubscribe();
}

getCollection = (querySnapshot) => {
const formArr = [];
querySnapshot.forEach((res) => {
const { FormId, Company, CreatedBy, CreatedWhen, LastModified, LastModifiedBy, Payload } = res.data().formMetaData;
formArr.push({
FormId: FormId,
Company: Company,
CreatedBy: CreatedBy,
CreatedWhen: CreatedWhen,
LastModified: LastModified,
LastModifiedBy: LastModifiedBy, 
Payload: Payload
});
});
this.setState({
formArr,
isLoading: false,
});
}
render() {
if (this.state.isLoading){
return(
<View style={styles.preloader}>
<Text>Loading...</Text>
</View>
)
}
return(
<View style={styles.dumb}>
<Text>Form Data Below</Text>
<View>
<Text>{
this.state.formArr.length > 0 ? this.state.formArr.map((item) => {

<Text>Hello</Text>

}) : <Text>No Forms in Database</Text>

}</Text>
</View>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
paddingBottom: 0
},
preloader: {
paddingTop: 10,
alignItems: 'center',
justifyContent: 'center'
},
dumb: {
borderWidth: 1,
}
})

export default FormBuilder;

因此，我从数据库中接收数据，并在数据加载后显示该数据。我遇到麻烦的部分是这条线：

{this.state.formArr.length > 0 ? this.state.formArr.map((item) => {
<Text>Hello</Text>
}) : <Text>No Forms in Database</Text>
}

即使达到this.state.formArr.length > 0条件，<Text>Hello</Text>也不会出现在屏幕上。

我检查了是否达到了条件，因为如果用alert(1)替换<Text>Hello</Text>，就会出现警报。

屏幕上唯一显示的是<Text>Form Data Below</Text>

我是不是错过了一些显而易见的东西？我知道条件正在执行，那么为什么<Text>标记不呈现呢？如果你们有任何问题，请告诉我。

Answer 1

我在您的代码中看到的问题是，在映射数组后，您没有返回组件，这就是为什么它没有在屏幕上显示任何内容。

试试这个

{
this.state.formArr.length > 0 ? (
this.state.formArr.map(item => {
return <Text>Hello</Text>;
})
) : (
<Text>No Forms in Database</Text>
);
}