Есть ли способ перерисовать компонент без вызова функции возврата внутри useEffect? - PullRequest
Новая
       53

Есть ли способ перерисовать компонент без вызова функции возврата внутри useEffect?

0 голосов
/ 15 апреля 2020

Я новичок в React Hooks; Я использую 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",
  },
});
...