React组件使用async/await调用API获取数据存在延迟问题求助

问题原因分析 #

1. 初始渲染空值问题：组件初始化时products的初始状态是空数组[]，通过id - 1取数组元素时，因数组为空直接返回undefined，这是第一次控制台输出undefined的原因。
2. React StrictMode开发环境特性：React 18开发模式下的StrictMode会强制组件函数和useEffect执行两次，用于检测潜在副作用。这导致接口请求完成前，组件又触发一次渲染，此时products仍为空数组，因此第二次输出undefined。
3. 异步请求时序问题：接口请求是异步操作，只有当getProducts返回数据并调用setProducts更新状态后，组件第三次渲染才能拿到正确的产品数据，此时控制台输出正常结果。

解决办法 #

1. 处理空值与加载状态

添加加载状态提示，同时判断数据是否存在，避免空值渲染：

import React, { useEffect, useState} from 'react';
import { getProducts } from "../services/api"
import { useParams} from 'react-router-dom'

const ProductDetails = () => {
    const params = useParams();
    const id = params.id;
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);
    const data = products[id - 1];
    
    useEffect (() => {
        const fetchAPII = async () => {
            try {
                const productData = await getProducts();
                setProducts(productData);
            } catch (err) {
                console.error('获取产品数据失败:', err);
            } finally {
                setLoading(false);
            }
        }
        fetchAPII();
    }, []);

    if (loading) {
        return <div>加载中...</div>;
    }

    if (!data) {
        return <div>未找到对应产品</div>;
    }
    
    return (
        <div>
          {console.log(data)}
          <h2>{data.title}</h2>
          <p>价格: ${data.price}</p>
          <p>{data.description}</p>
        </div>
    );
};

export default ProductDetails;

2. 优化数据获取逻辑（可选）

如果仅需单个产品数据，建议直接调用单个产品接口，减少数据传输量：

// 修改useEffect中的请求逻辑
useEffect (() => {
    const fetchAPII = async () => {
        try {
            setLoading(true);
            const productData = await getProductById(id); // 调用单个产品接口
            setProducts([productData]);
        } catch (err) {
            console.error('获取产品数据失败:', err);
        } finally {
            setLoading(false);
        }
    }
    fetchAPII();
}, [id]); // 依赖id，路由参数变化时重新请求

3. 清理不必要的控制台输出

调试时建议在数据加载完成后再输出，或使用React DevTools查看状态，避免频繁输出干扰调试。

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