在react本机中使用.map not平面列表和activityIndicator
提问于 2022-07-09 14:28:16
我正在使用map而不是flatlist获取数据列表，我想使用.map而不是平面列表，当我在获取数据时将ActivityIndicator应用到它时，它没有工作，见下面
下面的是我的代码
<View>
{dataList.map((dataList, index) =>
<Text key={index} >{dataList.category_name}</Text>
<Text key={index} >{dataList.category_number}</Text>
)}
</View>当我尝试使用ActivityIndicator时，参见下面
{ dataList ?
<View>
{dataList.map((dataList, index) =>
<Text key={index} >{dataList.category_name}</Text>
<Text key={index} >{dataList.category_number}</Text>
)}
</View>
:
<ActivityIndicator />
}不工作，我需要你的帮助。提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-09 15:16:03
尝试为条件呈现使用布尔值，例如加载状态，您可以在提取开始和结束时轻松地切换。您还可以在组件之外声明映射的逻辑，因此它看起来非常简洁，易于阅读，如下例所示：
import React from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
const dataList = [
{ category_name: 'pop', category_number: 1 },
{ category_name: 'dance', category_number: 2 },
{ category_name: 'hiphop', category_number: 3 },
];
const renderDataList = () => {
return dataList.map((dataList, index) => (
<View>
<Text>{dataList.category_name}</Text>
<Text>{dataList.category_number}</Text>
</View>
));
};
const App = () => {
const [isLoading, setIsloading] = React.useState(false);
return <View>{isLoading ? <ActivityIndicator /> : renderDataList()}</View>;
};
export default App;您的输出将为false：
您的真输出将是：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72925011
复制
腾讯云开发者
