Javascript 不确定如何在react native中显示对象内容

这就是对象（‘过滤的’）登录react native的方式-

我想在我的应用程序中显示每个仪表板标题，但由于某些原因，它不会显示在应用程序中

我需要显示仪表板标题，如下所示-

<Text style={styles.headerText}>{filtered}</Text>

{filtered}

目前，使用“过滤”，没有显示任何内容

这是完整的代码-

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; 

import React，{useState，useffect，useReducer}来自'React'；
从“react native”导入{View、Text、StyleSheet、FlatList、ActivityIndicator、Keyboard}；
从“react native paper”导入{Searchbar}；
从“../theme”导入{theme}；
从“反应本机矢量图标/唯物主义者”导入唯物主义者；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“../reducers/apiStateReducer”导入{apiStateReducer}；
从“../services/network/CogniteSensorEndpoints”导入CogniteSensorEndpoints；
从“../components/default/DefaultView”导入DefaultView；
从“../components/DashboardListCard”导入仪表板列表卡；
常量AppHeader=({
场景
以前的
航行
searchIconVisible=false，
}) => {
const[dashboards，dispatchDashboards]=useReducer（apiStateReducer{
数据：[]，
孤岛加载：是的，
伊瑟罗：错，
});
const[filtered，setFiltered]=useState（）；
常量设置加载=（值）=>{
const messages=仪表板.data.message.filter（（项）=>{
const title=item.dashboardTitle | | item.dashboardName；
返回title.toLowerCase（）.startsWith（value.toLowerCase（））；
});
设置过滤（消息）；
console.log（过滤）；
};
const dropShadowStyle=styles.dropShadow；
const toggleSearchVisibility=（）=>{
导航。导航（“搜索”）；
};
useffect（（）=>{
CogniteSensorEndpoints.getDashboardList({
dispatchReducer：dispatchDashboards，
});
}, []);
返回(
{以前的(
) : (
)}
{过滤}
{searchIconVisible(
) : (
)}
);
};
const styles=StyleSheet.create({
标题：{
背景颜色：“#FFF”，
为内容辩护：“中心”，
对齐项目：“居中”，
宽度：“100%”，
身高：60，
flexDirection:'行'，
填充：theme.space.small，
玛金托普：30
},
标题文字：{
…主题。版式。标题2，
重量：'700'，
},
标题左键：{
marginRight:“自动”，
填充：theme.space.tiny，
},
headerRightIconContainer：{
marginLeft:'自动'，
},
头灯图标：{
填充：theme.space.tiny，
},
无形的：{
宽度：40，
颜色：“#FFFFFF”，
},
可见：{
颜色：“#000”，
},
dropShadow：{
边界半径：50，
背景颜色：“白色”，
阴影颜色：“#000”，
阴影偏移：{
宽度：0，
身高:1,，
},
阴影不透明度：0.2，
阴影半径：1.41，
标高：2，
},
});
导出默认AppHeader；

过滤的

是一个数组，要在React中显示数组，只需使用

映射

：

。。。
{筛选的.map（项=>(
{item.dashboardName}-{item.dashBoardTitle}
))}
...

参考：

若要使此代码在

已筛选

为

未定义

时不引发错误，应为其指定初始值：

const[filtered，setFiltered]=useState（[]）；

您不需要筛选状态，只需使用您创建的“messages”变量即可。您还显示了{filtered}当它是一个字符串数组时，您应该映射到它以显示每个条目。