React项目中useEffect钩子未运行，无法从API获取产品数据怎么办？

以下是针对你问题的排查和解决步骤：

• 先确认组件是否正常挂载
  如果组件没被渲染到页面上，useEffect肯定不会执行。检查路由配置是否正确，父组件有没有条件渲染逻辑导致该组件被隐藏。

• 检查useEffect的依赖项配置
  你的useEffect依赖数组是空的，只会在组件首次挂载时执行一次。如果props.match.params.slug是动态变化的（比如从其他页面跳转过来），需要把它加入依赖项，确保参数更新时重新触发数据请求：

  useEffect(() => {
      async function fetchData() {
          const {data} = await request.get('/product/getAll');
          setRelatedProducts(data);
      }
      fetchData();
  }, [props.match.params.slug]); // 添加slug到依赖数组
  

• 给API请求加错误捕获，排查请求问题
  很多时候不是useEffect没运行，而是请求失败没反馈。给fetchData加上try/catch，打开控制台看日志：

  async function fetchData() {
      try {
          const {data} = await request.get('/product/getAll');
          setRelatedProducts(data);
          console.log('数据获取成功:', data);
      } catch (error) {
          console.error('API请求出错:', error);
      }
  }
  

  检查是否有跨域错误、axios实例配置错误（比如baseURL没设对）、后端接口返回异常等问题。

• 优化product变量的计算时机
  你在组件顶层直接计算product，首次渲染时relatedProducts是空数组，product会是undefined。用useMemo缓存计算结果，避免重复计算：

  import { useMemo } from 'react';
  
  const product = useMemo(() => {
      return relatedProducts.find((e) => e.Slug === props.match.params.slug);
  }, [relatedProducts, props.match.params.slug]);
  

修改后的完整代码示例 #

import request from '../../utils/axiosInstances'
import { useState, useEffect, useMemo } from 'react';

const ProductDetail = (props) => {
    const [relatedProducts, setRelatedProducts] = useState([])

    const product = useMemo(() => {
        return relatedProducts.find((e) => e.Slug === props.match.params.slug);
    }, [relatedProducts, props.match.params.slug]);

    useEffect(() => {
        async function fetchData() {
            try {
                const {data} = await request.get('/product/getAll');
                setRelatedProducts(data);
                console.log('产品数据:', data);
            } catch (err) {
                console.error('请求失败:', err);
            }
        }
        fetchData();
    }, [props.match.params.slug]);

    return (
        <div className="product-detail">
            {product ? (
                <div>
                    <h1>{product.Title}</h1>
                    {/* 渲染产品详情 */}
                </div>
            ) : (
                <div>加载中...</div>
            )}
        </div>
    )
}

export default ProductDetail;

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