React应用中Location State为空与重复渲染问题求助

一、Location State 为 null 的错误修复 #

问题原因 #

1. 语法错误导致组件渲染异常：Products 组件中数组遍历方法写成了 products.Map（大写M），正确写法应为 products.map；同时组件直接返回数组，违反JSX必须有根元素的规则，导致组件渲染失败，Link 无法正确传递 state。
2. 未做空值校验：ProductDetailPage 直接访问 location.state.product，当 state 不存在（如组件渲染异常、页面刷新）时会抛出空指针错误。

修复步骤 #

1. 修正组件渲染语法：
   给 Products 组件补充根容器，同时修正数组方法拼写：

   const Products = ({ products }) => {
     return (
       <div>
         {products.map((product) => (
           <Product key={product.title} product={product} />
         ))}
       </div>
     );
   };
   

2. 添加空值安全校验：
   在 ProductDetailPage 中先判断 state 是否存在，避免报错：

   const ProductDetailPage = () => {
     const params = useParams();
     const location = useLocation();
     // 使用可选链操作符安全获取product
     const product = location.state?.product;
   
     // 当商品信息不存在时，返回提示或跳转回商店页
     if (!product) {
       return <div>商品信息加载失败，请返回商店重试</div>;
     }
   
     console.log({ params, product, location });
   
     return (
       <div>
         ProductDetail: {params.productId}
         <img src={product.imageUrl} alt={product.title} />
         <div>ProductDetail: {params.productId}</div>
       </div>
     );
   };
   

3. 简化Link组件写法：
   React Router v6 支持字符串路径+独立state参数的写法，可让代码更清晰：

   <Link 
     to={`/store/${product.title}`}
     state={{ product }}
   >
     <img
       className="h-40 rounded w-full object-cover object-center mb-6 cursor-pointer"
       src={product.imageUrl}
       alt="content"
     />
   </Link>
   

二、组件重复渲染（console.log打印两次）的处理 #

问题原因 #

开发环境下，React的Strict Mode会强制组件渲染两次，用于检测潜在的副作用（如未清理的定时器、重复订阅等），这是官方设计的调试机制，生产环境不会触发该行为。

解决方案 #

1. 调试阶段的处理：
   如果只是调试用的console.log，无需特殊处理，两次打印属于正常现象；若需确保逻辑仅执行一次，将代码放入useEffect钩子：

   import { useEffect } from 'react';
   
   const ProductDetailPage = () => {
     const params = useParams();
     const location = useLocation();
     const product = location.state?.product;
   
     useEffect(() => {
       // 仅在依赖项变化时执行一次
       console.log({ params, product, location });
     }, [params, product, location]);
   
     // ...其余代码
   };
   

2. 关闭Strict Mode（可选）：
   若需彻底关闭两次渲染，可移除项目根文件（通常是index.js）中的<React.StrictMode>标签，但不建议长期关闭，它能帮助发现潜在代码问题。

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