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>  
))}

const[filtered，setFiltered]=useState（[]）；
{筛选的.map（项=>(
{item.dashboardName}-{item.dashboardTitle}
))}
{filtered.map（（项，索引）=>(
{item.dashboardName}
))}
{messages.map（（消息，键）=>(
{message.dashboardName}
))}

以下是完整的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>
  </>
  );
};

import React，{useState，useffect，useReducer}来自'React'；
从“react native”导入{视图、文本、样式表、平面列表、ActivityIndicator、键盘、按钮}；
从“react native paper”导入{Searchbar}；
从“../theme”导入{theme}；
从“反应本机矢量图标/唯物主义者”导入唯物主义者；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“../reducers/apiStateReducer”导入{apiStateReducer}；
从“../services/network/CogniteSensorEndpoints”导入CogniteSensorEndpoints；
从“../components/default/DefaultView”导入DefaultView；
从“../components/DashboardListCard”导入仪表板列表卡；
从“../components/DashboardHeader”导入DashboardHeader；
从“../components/DashboardGridCard”导入DashboardGridCard；
进口{
导航容器，
useFocusEffect，
}来自'@react导航/native'；
从'@react navigation/stack'导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
常量AppHeader=({
场景
以前的
航行
searchIconVisible=false，
项目,，
指数
onPress
}) => {
const[dashboards，dispatchDashboards]=useReducer（apiStateReducer{
数据：[]，
孤岛加载：是的，
伊瑟罗：错，
});
const[gridView，setGridView]=useState（false）；
常量toggleGridView=（）=>{
setGridView（！gridView）；
};
const[filtered，setFiltered]=useState（[]）；
常量setLoading=（）=>{
const messages=仪表板.data.message.filter（（项）=>{
const title=item.dashboardTitle | | item.dashboardName；
返回title.toLowerCase（）；
});
设置过滤（消息）；
console.log（过滤）；
};
const dropShadowStyle=styles.dropShadow；
const toggleSearchVisibility=（）=>{
导航。导航（“搜索”）；
};
useffect（（）=>{
console.log（'abcd'）；
设置加载（）；
CogniteSensorEndpoints.getDashboardList({
dispatchReducer：dispatchDashboards，
});
CogniteSensorEndpoints.getList({
dispatchReducer：dispatchDashboards，
});
},[]);
返回(
{以前的(
) : (
)}
{筛选的.map（项=>(
{item.dashboardTitle}
))}
{searchIconVisible(
) : (
)}
);
};

---

我不确定我是否得到了它，您何时渲染标题？我的意思是，你是想显示一个列表，还是希望每个标题都有一个动态名称，但你只收到一次所有标题的标题？如果您附加一个映像，可能会更清楚是标题名称控制台日志为“dashboardTitlte”，就像在对象中一样。我必须动态映射每个标题，以在应用程序的每个屏幕上显示为应用程序标题。我认为setLoading没有装载，所以我将其包含在useEffect中，但这也会返回错误。如上所述，我编辑了包含setLoading（）函数的代码。但是我认为我没有正确地包含它，这就是错误的原因。好的，这样的话，如果你不需要呈现一个列表，你应该把你的标题数组放在某个地方，然后根据你的屏幕名称选择你要显示的标题。您所编写的

映射

正在生成一个标题列表，但正如您所说的，您不希望这样。你可以做的是向你的标题发送一个带有索引号的道具（它告诉你你在哪个屏幕上），然后通过这个道具你应该显示标题