javascript - 不知道如何在本机反应中显示对象内容
问题描述
这就是对象(“过滤”)登录反应本机的方式-
我想在我的应用程序中显示每个仪表板标题,但是由于某种原因它没有显示在应用程序中。
我需要在下面的组件中显示dashboardTitle -
<Text style={styles.headerText}>{filtered}</Text>
目前,通过“过滤”,什么都没有出现。
这是完整的代码-
import React, { useState, useEffect, useReducer } from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, Keyboard} from 'react-native';
import { Searchbar } from 'react-native-paper';
import { theme } from '../theme';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { apiStateReducer } from '../reducers/ApiStateReducer';
import CognitensorEndpoints from '../services/network/CognitensorEndpoints';
import DefaultView from '../components/default/DefaultView';
import DashboardListCard from '../components/DashboardListCard';
const AppHeader = ({
scene,
previous,
navigation,
searchIconVisible = false,
}) => {
const [dashboards, dispatchDashboards] = useReducer(apiStateReducer, {
data: [],
isLoading: true,
isError: false,
});
const [filtered, setFiltered] = useState();
const setLoading = (value) => {
const messages = dashboards.data.message.filter((item) => {
const title = item.dashboardTitle || item.dashboardName;
return title.toLowerCase().startsWith(value.toLowerCase());
});
setFiltered(messages);
console.log(filtered);
};
const dropShadowStyle = styles.dropShadow;
const toggleSearchVisibility = () => {
navigation.navigate('Search');
};
useEffect(() => {
CognitensorEndpoints.getDashboardList({
dispatchReducer: dispatchDashboards,
});
}, []);
return (
<>
<View style={styles.header}>
<View style={styles.headerLeftIcon}>
<TouchableOpacity onPress={navigation.pop}>
{previous ? (
<MaterialIcons
name="chevron-left"
size={24}
style={styles.visible}
/>
) : (
<MaterialIcons
name="chevron-left"
size={24}
style={styles.invisible}
/>
)}
</TouchableOpacity>
</View>
<Text style={styles.headerText}>{filtered}</Text>
<View style={styles.headerRightIconContainer}>
{searchIconVisible ? (
<TouchableOpacity
style={[styles.headerRightIcon, dropShadowStyle]}
onPress={toggleSearchVisibility}>
<MaterialIcons name="search" size={24} style={styles.visible} />
</TouchableOpacity>
) : (
<View style={styles.invisible} />
)}
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
header: {
backgroundColor: '#FFF',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 60,
flexDirection: 'row',
padding: theme.spacing.small,
marginTop: 30
},
headerText: {
...theme.typography.title2,
fontWeight: '700',
},
headerLeftIcon: {
marginRight: 'auto',
padding: theme.spacing.tiny,
},
headerRightIconContainer: {
marginLeft: 'auto',
},
headerRightIcon: {
padding: theme.spacing.tiny,
},
invisible: {
width: 40,
color: '#FFFFFF',
},
visible: {
color: '#000',
},
dropShadow: {
borderRadius: 50,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
});
export default AppHeader;
解决方案
filtered
是一个数组,要在 React 中显示一个数组,你只需要使用map
:
...
{filtered.map(item => (
<Text style={styles.headerText}>
{item.dashboardName} - {item.dashBoardTitle}
</Text>
))}
...
参考:https ://reactjs.org/docs/lists-and-keys.html
要使此代码在 is 时不抛出错误filtered
,undefined
您应该为其分配一个初始值:
const [filtered, setFiltered] = useState([]);
推荐阅读
- vue.js - 在 v-tabs 中使用 vuejs 和 vuetify 访问 dom 元素
- azure - 我可以在每小时 9 点到下午 6 点之间的 5 个工作日内触发我的 Azure 数据工厂管道吗
- python-3.x - 我正在尝试求解一个线性方程,但我不断收到错误“数组的最后 2 个维度必须是正方形”
- java - 放置在 Swing 环境中的项目列表
- vue.js - 在节点 13.9.0 上使用 nuxt 进行开玩笑测试时导入 vue-awesome 图标错误
- python-3.x - 如何对文件夹中的多个 .txt 文件执行正则表达式(Python)?
- python-3.x - 进行回归时的gpflow矩阵反转错误
- javascript - 为什么它作为未定义的“发送”返回?
- mysql - Nodejs Mysql连接最佳实践
- sql - 有什么方法可以在 SQL Server 中使用 SIMILAR TO 运算符或任何其他运算符,如 Similar TO 运算符?