在for循环中使用Axios请求未等待，单次仅遍历一个元素的解决方法

核心问题 #

你的代码存在两个关键问题导致无法遍历所有productId：

1. 异步操作顺序错误：getBasket是异步函数，调用后立刻执行for循环时，products还是初始的空数组，循环根本不会执行；当getBasket完成更新products状态后，useEffect因为依赖为空数组，不会再次触发，所以没有机会遍历新的产品ID。
2. 状态更新的闭包陷阱：即使循环执行了，setDescriptions([...descriptions, ...])使用的是闭包捕获的旧状态值，多次调用后只会保留最后一次添加的描述，因为每次都是基于初始空数组拼接。

修复后的代码 #

const useBasket = (location) => {
    const [products, setProducts] = useState([]);
    const [descriptions, setDescriptions] = useState([]); 
    console.log("ACCOUNT ID:", location.location.state.accountId);

    useEffect(() => {
        const fetchBasketAndProducts = async () => {
            // 1. 先获取购物篮中的产品ID列表
            const basketResponse = await Axios.get(`http://localhost:8084/accountId/${location.location.state.accountId}`);
            const productIds = basketResponse.data.products;
            setProducts(productIds);

            // 2. 并行请求所有产品信息，提升效率
            const descriptionPromises = productIds.map(id => 
                Axios.get(`http://localhost:8081/product/${id}`)
                    .then(res => res.data.description)
                    .catch(err => {
                        console.log(err);
                        return ''; // 出错时返回默认值，避免Promise.all整体失败
                    })
            );

            // 3. 等待所有请求完成，一次性更新状态
            const fetchedDescriptions = await Promise.all(descriptionPromises);
            setDescriptions(fetchedDescriptions);
        };

        fetchBasketAndProducts();
    }, [location.location.state.accountId]); // 添加依赖，accountId变化时重新请求

    console.log("DESCRIPTIONS:", descriptions);
    return { descriptions, products }; 
};

关键修改点 #

• 合并异步逻辑：把购物篮数据获取和产品信息请求放到同一个async函数中，确保拿到产品ID后再执行遍历请求，避免依赖未更新的products状态。
• 并行请求优化：用Promise.all同时发起所有产品信息请求，比串行请求效率更高；如果业务需要串行请求，可以替换成for...of循环逐个await请求。
• 一次性更新状态：收集所有请求结果后再调用setDescriptions，彻底避免闭包导致的状态覆盖问题。
• 添加正确依赖：给useEffect添加location.location.state.accountId作为依赖，当账户ID变化时自动重新触发数据获取，符合React Hooks规则。

可选方案（逐个更新状态） #

如果需要逐个更新描述（会多次触发组件渲染），可以使用函数式状态更新，确保每次都基于最新状态拼接：

// 在fetchBasketAndProducts函数中替换请求逻辑
for (const id of productIds) {
    try {
        const res = await Axios.get(`http://localhost:8081/product/${id}`);
        setDescriptions(prev => [...prev, res.data.description]);
    } catch (err) {
        console.log(err);
        setDescriptions(prev => [...prev, '']);
    }
}

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