React子组件Props为空，刷新父组件后才正常的问题排查

核心问题分析 #

1. 异步状态更新导致的逻辑错误
   React的setState是异步操作，你在fetch的回调里调用setProdData后，立刻访问prodData.catId，此时prodData还是初始的空数组（[]），并非刚设置的产品数据。这会导致查找分类时用的是undefined作为catId，最终catData无法匹配到正确值。

2. 初始状态设置不符合预期
   prodData和catData初始值设为[]，但实际需要的是单个产品/分类对象或null。初始渲染时，空数组不会触发你的if判断（[]既不是null也不是undefined），导致子组件直接接收到空数组，表现为“空对象”。

3. 依赖数组缺失
   useEffect的依赖数组为空，当路由参数itemId变化时，不会重新触发数据获取，这是潜在的路由切换问题。

修复步骤 #

1. 先获取产品数据，再基于该数据查找分类
   不要依赖状态中的prodData，直接用fetch返回的产品对象来查找分类：

   .then(function (myJson) {
       const foundProduct = myJson['products'].find((c) => c.id == itemId);
       setProdData(foundProduct);
       // 用可选链避免产品不存在时报错
       const foundCategory = myJson['categories'].find((c) => c.catId == foundProduct?.catId);
       setCatData(foundCategory);
   });
   

2. 修正初始状态
   将初始状态改为null，确保初始渲染时触发加载判断：

   const [catData, setCatData] = useState(null);
   const [prodData, setProdData] = useState(null);
   

3. 补充useEffect依赖
   把itemId加入依赖数组，确保路由参数变化时重新拉取数据：

   useEffect(() => {
       getData();
   }, [itemId]);
   

4. 优化加载状态（可选）
   把返回null改为加载提示，提升用户体验：

   if (!prodData || !catData) {
       return <div>加载中...</div>;
   }
   

控制台两次打印Props的原因 #

首次加载时，组件会经历两次渲染：

• 第一次：初始状态下prodData和catData为null/[]，子组件接收到空值并打印；
• 第二次：fetch完成后状态更新，子组件接收到正确数据并打印。
  修复后，初始渲染会返回加载提示，子组件不会渲染，也就不会出现两次打印的情况。

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