无法访问 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;

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

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

例如，如果我用一个产品开始状态，那么在getProducts函数中调用products将始终带来这一个产品，而不是从API fetch加载的正确登录到控制台中的产品

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

知道为什么会发生这种事吗？能够在useState挂钩内访问产品状态，但不能在getProducts功能内访问？

Answer 1

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

但这不是你的选择。在您的情况下，唯一的选择是使用上一个值作为传递给setState的回调的参数(在您的示例中为setProducts(。

希望这对将来的其他人有所帮助：(。