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确实正确打印了产品数组，并且组件也正确地渲染了产品标题。

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

例如，如果我以一种产品开始状态，则在products函数中调用getProducts总是会带来一种产品，而不是从API获取的产品，已正确登录到控制台中。

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

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

Answer 1

由于Javascript范围和闭包，无法获得更新的products状态。声明getProducts()函数后，products变量将作为闭包保存在getProducts()中。 https://css-tricks.com/javascript-scope-closures/。因此，这意味着您无法在getProducts()内获取更新状态，但是可以在setProducts内调用getProducts()。

也许您可以尝试使getProducts()函数像这样

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

，您可以像这样在useEffect()内部调用它

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

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

1 个答案: