Question

我是React Hooks的新手；我正在使用带有React-navigation的React native，正在使用Redux来管理状态，一切都很好，但是当我尝试使用onEndReached FlatList在内部加载更多数据时，如果我尝试清除状态，则正在更改状态useEffect内的return函数使该组件重新呈现并提供新数据，但是如果我删除useEffect内的return函数，则按预期工作；请帮忙。

这是我的代码：

action.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",
  },
});

有没有一种方法可以重新渲染组件而无需在useEffect内调用return函数？

0 个答案: