在讨论这个问题之前，我想先解释一下如何为我的组件获取数据。

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

正如你在上面的代码中看到的，你可以看到我正在从redux useSelector store with redux hook获取数据。每当navigation中发生更改时，我都会向API请求数据。
所以现在是flatList，PROBLEM在这里

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

正如你所看到的，当用户到达平面列表的末尾时，我正在运行一个函数handleLoadMoreData。
在我请求的函数中，增加我请求的最大项目数

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

我在函数中放置了一个警报，这样我就可以检测函数是否运行。
问题是函数确实运行了，因为我收到了一个警报，但setNumberOfItem(40)没有增加项目的数量。
我做了一个console log the number of items的separate button。当我按下那个按钮时，得到一个警报后，数字仍然是20，它根本没有增加。
我收到警报，但为什么数量没有增加