React中useState处理Promise问题：首次点击无法获取API返回JSON

问题原因 #

你猜的没错——React的状态更新是异步执行的。调用setProducts(data)后，products这个状态变量不会立刻更新为新值，所以首次点击时console.log(products)打印的还是更新前的旧状态；第二次点击时，上一次的状态更新已经完成，才能看到新数据。但实际上API请求在首次点击时已经成功返回了数据，只是你没在正确的时机观察到。

解决方案 #

1. 直接查看API返回结果（确认请求成功） #

修改testChargue函数，直接打印API返回的原始数据，而不是依赖React状态：

const testChargue = async () => {
    console.log(selectedChannel)
    console.log(selectedCategory)
    // 直接获取API返回数据，再更新状态
    const productData = await productsService.getProducts(selectedChannel, selectedCategory);
    setProducts(productData);
    console.log(productData); // 这里能立刻看到API返回的结果
}

2. 监听状态变化，在更新后执行操作 #

如果需要在products状态更新后做后续处理（比如打印、渲染逻辑），可以用useEffect监听状态变化：

// 新增这个useEffect
useEffect(() => {
    // 每次products状态更新时，这里都会触发
    console.log('更新后的产品数据:', products);
}, [products]); // 依赖数组中加入products，仅当它变化时执行

const testChargue = async () => {
    console.log(selectedChannel)
    console.log(selectedCategory)
    const productData = await productsService.getProducts(selectedChannel, selectedCategory);
    setProducts(productData);
}

3. 简化API服务代码（可选优化） #

原ProductsService中同时使用await和.then有点冗余，改成更清晰的try/catch写法：

export default class ProductsService {
    async getProducts(channel, category){
        try {
            // 用模板字符串拼接URL，可读性更好
            const response = await axios.post(
                `https://appshop.dapducasse.cl/ducasse-api/api/Qrs?channel=${encodeURIComponent(channel)}&category=${encodeURIComponent(category)}`
            );
            return response.data;
        } catch (error) {
            console.error('获取产品列表失败:', error);
            return [];
        }
    } 
}

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