Question

我想在 useEffect 中挂载一个函数，我如何在 useEffect 中调用这个函数，我不确定？最初useEffect在app中写成如下-

    useEffect(() => {
    CognitensorEndpoints.getDashboardList({
      dispatchReducer: dispatchDashboards,
    });
    CognitensorEndpoints.getList({
      dispatchReducer: dispatchDashboards,
    });
  },[]);

然后当我如下包含 useEffect 时，它返回错误（'Cannot read property 'filter' of undefined'）-

    useEffect(() => {
    console.log('abcd');
    setLoading();
    CognitensorEndpoints.getDashboardList({
      dispatchReducer: dispatchDashboards,
    });
    CognitensorEndpoints.getList({
      dispatchReducer: dispatchDashboards,
    });
  },[]);

如何在 useEffect 中正确包含“setLoading()”？

这是完整的应用程序代码-

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

Answer 1

错误是因为 dashboards.data.message 是 undefined 或 null。请重新检查数据。

不确定如何在 useEffect 中包含函数

1 个答案: