useEffect钩子中products状态未更新问题求助

为什么console.log(products)显示空数组？ #

React的useState状态更新是异步的，调用setProducts(pro)后，当前渲染周期内的products仍然保持初始的空数组值。你在setProducts之后立即打印，拿到的是更新前的旧状态，并不是状态没更新。

为什么加products到依赖数组会无限渲染？ #

每次调用setProducts(pro)，如果API返回的是新数组（引用不同），products的引用就会改变，触发useEffect重新执行，再次调用API、更新状态，形成无限循环。

解决方案 #

1. 正确查看更新后的状态

要确认状态是否真的更新，可以通过以下方式：

• 新增一个监听products的useEffect，状态更新时自动打印
• 在组件的JSX中渲染products，直接在页面上查看结果

2. 修正代码示例

const [products, setProducts] = useState([]);

// 仅在组件挂载时调用一次API
useEffect(() => {
    const apiCaller = async () => {
        const res = await axios.get('http://127.0.0.1:2000/');
        // axios.get返回的res.data已经是解析后的JSON，无需await
        setProducts(res.data);
    };
    apiCaller();
}, []);

// 监听products状态变化，打印更新后的值
useEffect(() => {
    console.log('更新后的products:', products);
}, [products]);

// 在页面渲染products验证
return (
    <div>
        {products.length === 0 ? (
            <p>加载中...</p>
        ) : (
            products.map(product => (
                <div key={product.id}>{product.name}</div>
            ))
        )}
    </div>
);

额外注意事项 #

• 确保API返回的数据格式是数组，如果返回的是对象，products会变成对象而非数组，需要根据实际结构调整setProducts的参数
• 依赖数组保持为空，确保API只在组件挂载时调用一次，避免不必要的重复请求

内容的提问来源于stack exchange，提问作者Ravi Choudhary