javascript - 不确定如何将对象内容映射到应用程序中显示
问题描述
我想在我的应用程序的前端显示对象的内容。对象控制台日志如下 -
我想通过将“dashboardTitle”映射到我的应用程序中每个屏幕的 AppHeader 来显示它。我已尝试执行以下操作,但以下都不会呈现“dashboardTitle”。
const [filtered, setFiltered] = useState([]);
{filtered.map(item => (
<Text style={styles.headerText}>
{item.dashboardName} - {item.dashboardTitle}
</Text>
))}
{filtered.map((item, index)=>(
<Text style={styles.headerText} key={index}>
{item.dashboardName}
</Text>
))}
{messages.map((message, key)=>(
<Text style={styles.headerText}>
{message.dashboardName}
</Text>
))}
这是完整的 AppHeader 代码-
import React, { useState, useEffect, useReducer } from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, Keyboard, Button } 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';
import DashboardHeader from '../components/DashboardHeader';
import DashboardGridCard from '../components/DashboardGridCard';
import {
NavigationContainer,
useFocusEffect,
} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const AppHeader = ({
scene,
previous,
navigation,
searchIconVisible = false,
item,
index,
onPress
}) => {
const [dashboards, dispatchDashboards] = useReducer(apiStateReducer, {
data: [],
isLoading: true,
isError: false,
});
const [gridView, setGridView] = useState(false);
const toggleGridView = () => {
setGridView(!gridView);
};
const [filtered, setFiltered] = useState([]);
const setLoading = () => {
const messages = dashboards.data.message.filter((item) => {
const title = item.dashboardTitle || item.dashboardName;
return title.toLowerCase();
});
setFiltered(messages);
console.log(filtered);
};
const dropShadowStyle = styles.dropShadow;
const toggleSearchVisibility = () => {
navigation.navigate('Search');
};
useEffect(() => {
console.log('abcd');
setLoading();
CognitensorEndpoints.getDashboardList({
dispatchReducer: dispatchDashboards,
});
CognitensorEndpoints.getList({
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>
{filtered.map(item => (
<Text style={styles.headerText}>
{item.dashboardTitle}
</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>
</>
);
};
解决方案
推荐阅读
- php - PHP - SimpleXML xpath 函数来获取特定节点的值
- python - ValueError:无法将字符串转换为浮点数:变量中的空字符串
- c++ - 即使委托仅添加到 QTableView,QListView 项目也显示委托编辑器
- google-apps-script - Google Scripts - 在不同的工作表中触发和运行
- forms - VueJS - 长长的 v-if 列表的最佳替代方案是什么
- jquery-ui - 无法将连接列表中的项目添加到可排序列表
- unity3d - 在 2d 对象统一后渲染 3d 对象
- c# - ArgumentOutOfRangeException 但参数没有超出范围
- php - 在哪里更改 ubuntu 的 php-fpm.conf 中的监听端口?
- kubernetes - 如何向 Kubernetes 控制器管理器添加标志