Rect Native, Why onEndReached setState is not working?-CodePudding

Before getting into the problem I wanna explain how I am getting data for my component first.

// Get List
  let productList = useSelector(state => state.productReducer.productList);

  
  const [activeTab, setActiveTab] = useState(showCateory);
  const [numbersOfItem, setNumberOfItem] = useState(20);
  const [itemList, setItemList] = useState(productList);

  useEffect(() => {
    setItemList(productList);
  }, [productList]);

  const renderIndividualItem = ({item}) => <IndividualItem item={item} />;
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setLoading(true);
      async function fetchData() {
        try {
          await dispatch(fetchProductList(numbersOfItem));
        } catch (err) {
          console.log(err);
        } finally {
          setLoading(false);
        }
      }

      fetchData();
    });

    return unsubscribe;
  }, [navigation]);

As you can see in the above code you can see that I am getting data from redux useSelector store with redux hook. I am requesting data to API whenever there is a change in navigation.

So Now is the flatList where the PROBLEM Is

<FlatList
           
         data={itemList}
         numColumns={2}
         nestedScrollEnabled
         columnWrapperStyle={styles.flatItemColumn}
         scrollEnabled
         ItemSeparatorComponent={() => (
           <View style={styles.separatorWidth} />
         )}
         scrollEventThrottle={16}
         snapToAlignment="start"
         decelerationRate={'fast'}
         showsHorizontalScrollIndicator={false}
         renderItem={renderIndividualItem}
         keyExtractor={(item, index) => String(index)}
         onEndReached={() => handleLoadMoreData()}
      />

As you can see I am running a function handleLoadMoreData when user reached to end of the flat list.

In the function I am requesting increasing the max number of item I am requesting

const handleLoadMoreData = () => {
    alert('function run')
    setNumberOfItem(40);
  };

I put an alert in the function so that I can detect whether the function run or not.

The thing is function do run because I got an alert but the setNumberOfItem(40) does not increase the number of item.

I made a separate button that console log the number of items. After Getting an alert when I press that button the number stills at 20 it doesn't increase at all.

I am getting the alert but why the number not increasing

CodePudding user response：

If setNumberOfItem is an action dispatcher make sure it is connected to the store

CodePudding user response：

In your useEffect:

useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
  setLoading(true);
  async function fetchData() {
    try {
      await dispatch(fetchProductList(numbersOfItem));
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  }

  fetchData();
});

return unsubscribe;
}, [navigation]);

Add numbersOfItem to dependencies list like this:

[navigation, numbersOfItem]