javascript - 无法访问 React 函数组件中函数内部的状态

Question

我在 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钩子(Hook)确实正确打印了产品数组，并且该组件也正确呈现了产品标题。

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

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

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

知道为什么会发生这种情况吗？能够访问useState内的产品状态钩子(Hook)但不在 getProducts 内功能？

Answer 1

发生这种情况是因为 getProducts 使用的是声明 getProducts 时 products 的值，而不是 products 当调用 getProducts 函数时有。当您想在非内联函数中直接访问最新状态时，总是会出现这种情况。大多数情况下，您需要通过函数参数传递更新的值。

但这不是您的情况的选择。在您的情况下，唯一的选择是使用先前的值作为传递给 setState 的回调的参数(在您的情况下，setProducts)。

希望这对将来的其他人有帮助:)。