React组件从JSON获取产品列表无法渲染且useEffect无限执行求助

核心问题梳理 #

• 无限循环请求/渲染：fetch直接写在组件顶层，每次组件渲染都会触发请求，setProducts更新状态又会导致组件重新渲染，形成无限循环；同时useEffect未设置依赖数组，每次渲染都执行，导致console.log无限打印。
• 页面无内容：content是普通变量，组件重新渲染时会被重置，useEffect内的赋值无法同步到渲染输出；初始状态下content未定义，第一次渲染返回空。
• 数据访问逻辑错误：循环中products[goods[x].pic]写法有误，应直接取当前产品的pic和name属性，而非从products中再次索引。
• key值不规范：用数组索引作为key，当列表顺序变化时会引发React渲染异常，建议使用产品唯一标识。

逐步修复 #

1. 将fetch移至useEffect并添加依赖数组
   把数据请求逻辑放进useEffect，仅在组件挂载时执行一次（依赖数组为空），避免重复请求：

   useEffect(() => {
     fetch('products.json')
       .then(response => response.json())
       .then(data => setProducts(data))
       .catch(err => console.error('请求失败:', err));
   }, []);
   

2. 直接在渲染阶段生成JSX
   无需用普通变量存储JSX，直接在return语句中根据products状态动态生成内容，保持渲染逻辑直观。

3. 修正数据遍历逻辑
   假设products[goods]是目标产品数组，遍历该数组并直接读取产品属性：

   const productCards = products[goods].map(product => (
     <div className="productCard" key={product.id}> {/* 用产品唯一ID作为key */}
       <div className="productPicture">
         <img src={product.pic} alt={product.name} /> {/* 添加alt属性优化可访问性 */}
       </div>
       <div className="productName">{product.name}</div>
     </div>
   ));
   

4. 处理初始状态与异常情况
   在products为null时返回加载提示，同时检查目标产品数组是否存在，避免报错：

   if (!products) return <div>加载中...</div>;
   if (!products[goods] || !Array.isArray(products[goods])) {
     return <div>暂无产品数据</div>;
   }
   

完整修复代码 #

import { useState, useEffect } from "react";

function GoodsList(props) {
  const [products, setProducts] = useState(null);
  const goods = props.goods;

  // 仅在组件挂载时请求数据
  useEffect(() => {
    fetch('products.json')
      .then(response => {
        if (!response.ok) throw new Error('网络响应异常');
        return response.json();
      })
      .then(data => setProducts(data))
      .catch(err => console.error('产品数据加载失败:', err));
  }, []);

  // 初始加载状态
  if (!products) {
    return <div className="loading">加载中...</div>;
  }

  // 检查目标产品数组是否有效
  if (!products[goods] || !Array.isArray(products[goods])) {
    return <div className="error">暂无产品数据</div>;
  }

  // 生成产品卡片列表
  const productCards = products[goods].map(product => (
    <div className="productCard" key={product.id}>
      <div className="productPicture">
        <img src={product.pic} alt={product.name} />
      </div>
      <div className="productName">{product.name}</div>
    </div>
  ));

  return (
    <div className="list">
      {productCards}
    </div>
  );
}

额外说明 #

• 若props.goods是动态变化的，需将其加入useEffect的依赖数组，确保goods变化时重新请求数据（按需调整）。
• 始终添加错误捕获逻辑，避免请求失败导致组件崩溃。
• img标签添加alt属性，提升页面可访问性。

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