javascript - 不知道如何映射此对象内容以在本机反应中显示

Question

对象“过滤”控制台日志如下所示 - 我需要在我的应用程序标题中映射每个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} 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>
    </>
  );
};

export default AppHeader;

App Header 呈现如下

标签： javascriptreact-native