我在 React 中有以下组件：

import React, { useState, useEffect } from 'react';
import api from '../../services/api';

const Store = () => {
  const [products, setProducts] = useState([]);
  let pagination = null;

  const getProducts = async (page = 1) => {
    const { data } = await api.get('products', { params: { page } });

    setProducts([...products, ...data.products]);
    pagination = data.pagination;

    if (pagination.current < pagination.max) {
      document.addEventListener('scroll', loadMore);
    }
  };

  const loadMore = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 300) {
      getProducts(pagination.current + 1);
      document.removeEventListener('scroll', loadMore);
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  useEffect(() => {
    console.log(products);
  }, [products]);

  return (
    <div>
      {products.map(product => (
        <p>{product.name}</p>
      ))}
    </div>
  );
};

export default Store;

我的console.log内部useEffect钩子确实正确打印了产品数组，并且该组件也正确地呈现了产品标题。

但是，当我尝试访问函数products内部的变量时，getProducts它没有获得更新的产品值，而是获得了我在useState钩子中设置的值。

例如，如果我从一种产品开始状态，则products在getProducts函数内调用将始终带来这一种产品，而不是从 API fetch 加载的产品，这些产品已正确记录在控制台中。

因此，当我尝试将更多产品添加到数组的末尾时，它实际上只是将产品添加到一个空数组中。

知道为什么会这样吗？能够访问useState钩子内部的产品状态但不能访问getProducts函数内部？