reactjs - 有没有办法在不调用 useEffect 中的返回函数的情况下重新渲染组件？

Question

我是 React Hooks 的新手；我正在使用带有 react-navigation 的 React native，我正在使用 Redux 来管理状态，一切都很顺利，但是当我尝试使用 onEndReached FlatList 在内部加载更多数据时，如果我尝试清除状态，我正在更改状态使用 useEffect 中的返回函数，组件重新渲染并给我新数据，但是如果我删除 useEffect 中的返回函数，则按预期工作；请我乞求你的帮助。

这是我的代码：

动作.js：

// Clear Category
export const clearGetCategoryScreen = () => {
  return { type: CLEAR_CATEGORIES_SCREEN, payload: [] };
};

减速器：

const initialState = {};

export default (state = initialState, action) => {
  switch (action.type) {
    case GET_CATEGORY:
      return { ...state, category: action.payload };
    case CLEAR_CATEGORIES_SCREEN:
      return { ...state, category: action.payload };
    default:
      return state;
  }
};

这是我的组件：

import React, { useEffect, useState, useContext } from "react";
import { FlatList, View, StyleSheet, ActivityIndicator } from "react-native";
import { StackNavigationProp } from "@react-navigation/stack";
import { useTheme } from "react-native-paper";

import { Twitt } from "../../../components/twitt";
import { CategoryWrapper } from "./CategoryWrapper";
import { StackNavigatorParamlist } from "../../../types";
import { NavigationContext, useFocusEffect } from "@react-navigation/native";

import { useSelector, useDispatch } from "react-redux";

import { getCategoryByID } from "../../../actions/posts_action.js";
import { CLEAR_CATEGORIES_SCREEN } from "../../../actions/types";

type TwittProps = React.ComponentProps<typeof Twitt>;

function renderItem({ item }: { item: TwittProps }) {
  return <CategoryWrapper {...item} />;
}

function keyExtractor(item: TwittProps) {
  return item.id.toString();
}

type Props = {
  navigation?: StackNavigationProp<StackNavigatorParamlist>;
};

export const CategoryList = (props: Props) => {
  const theme = useTheme();
  const [perPage, setPerPage] = useState(5);
  const [isLoading, setIsLoading] = useState(false);
  const posts = useSelector((state) => state.category.category);
  const dispatch = useDispatch();
  const navigation = useContext(NavigationContext);

  const id = props.id;

  useEffect(() => {

    setIsLoading(false);
    dispatch(getCategoryByID(id, perPage));
    setIsLoading(true);

    return () => {
      dispatch({ type: CLEAR_CATEGORIES_SCREEN });
    };

  })

  const dataToRender = posts
    ? posts.map((postProps) => ({
        ...postProps,
        onPress: () =>
          navigation &&
          navigation.push("Details", {
            ...postProps,
          }),
      }))
    : null;

  const renderFooter = () => {
    return isLoading ? (
      <View style={styles.loader}>
        <ActivityIndicator size="large" color={theme.colors.primary} />
      </View>
    ) : null;
  };

  return (
    <FlatList
      contentContainerStyle={{ backgroundColor: theme.colors.background }}
      style={{ backgroundColor: theme.colors.background }}
      data={dataToRender}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      ItemSeparatorComponent={() => (
        <View style={{ height: StyleSheet.hairlineWidth }} />
      )}
      onEndReached={() => {
        setPerPage(perPage + 3);
      }}
      showsVerticalScrollIndicator={false}
      onEndReachedThreshold={0.1}
      ListFooterComponent={renderFooter()}
    />
  );
};

const styles = StyleSheet.create({
  loader: {
    margin: 10,
    alignItems: "center",
  },
});

标签： reactjsreact-nativereduxreact-hooksuse-effect