React自定义usePostFetch请求Hook异常导致页面报错如何解决

你遇到的报错本质是数据未加载完成时就访问了不存在的对象属性，具体问题点如下：

• 渲染逻辑没有做状态拦截：isLoading 为 true 时，数据还在请求中，postData 是空数组，此时你依然渲染了商品详情模块，通过 filter 得到的 value 是空数组，访问 data[0] 就是 undefined，自然读取不到 productImage 属性。
• 数据类型不一致：data 初始值设为对象，但后续存储的是 filter 返回的数组，类型混乱容易引发不可预期的错误。
• 语法误用：filter 是数组同步方法，不需要加 await 包裹，属于冗余的异步语法。
• 没有空值兜底：即使加载完成，也可能出现找不到对应 productId 商品的场景，直接访问数组下标会直接抛出异常。

另外你的 usePostFetch 里有个可优化的点：axios 返回的 res.data 已经是解析后的响应数据，不需要额外加 await，可以直接赋值。

推荐直接优化逻辑，删掉冗余的 data 状态和 useEffect，改用更简洁的实现：

import React, { useMemo } from "react";

//react router dom
import { useParams } from "react-router";
//Hooks
import usePostFetch from "../../Hooks/usePostFetch";
//styles
import { Wrapper, Info, Discription } from "./Product.styles";
//Server
const Server = "http://localhost:8000";

const Product = () => {
  const { productId } = useParams();
  const { postData, isLoading, error } = usePostFetch();
  // 直接从已拉取的列表中匹配对应商品，find返回对象不需要取下标
  const product = useMemo(() => {
    return postData.find(post => post._id === productId)
  }, [postData, productId])

  // 提前返回对应状态，避免异常渲染
  if (isLoading) return <h1>Loading....</h1>
  if (error) return <p>请求出错</p>
  if (!product) return <p>当前商品不存在</p>

  return (
    <Wrapper>
      <Info>
        <img
          src={`${Server}/productImages/${product.productImage}`}
          alt={product.productName}
        />
        <div className="data">
          <h1>{product.productName}</h1>
          <h3>{product.productPrice}</h3>
        </div>
      </Info>
    </Wrapper>
  );
};

export default Product;

修改说明 #

1. 用 useMemo 直接匹配目标商品，替换了冗余的 data 状态和 useEffect 逻辑，find 方法直接返回匹配的对象，不需要再访问数组下标。
2. 新增状态提前判断，只有数据正常加载、且匹配到商品时才渲染商品详情，从根源避免了访问不存在属性的问题。
3. 删掉了无用的异步语法，代码更简洁易读。

如果你不想改动原有结构，只想做最小修复，可以给商品渲染加判断条件：

return (
  <Wrapper>
    <Info>
      {isLoading && <h1> Loading.... </h1>}
      {error && <p>ERROR </p>}
      {/* 只有加载完成、无报错、且匹配到数据时才渲染商品内容 */}
      {!isLoading && !error && data.length > 0 && (
        <>
          <img
            src={`${Server}/productImages/${data[0].productImage}`}
            alt={data[0].productName}
          />
          <div className="data">
            <h1>{data[0].productName}</h1>
            <h3>{data[0].productPrice}</h3>
          </div>
        </>
      )}
    </Info>
  </Wrapper>
);

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