React中MongoDB单条产品数据无法渲染问题求助

核心错误原因 #

后端接口返回的是单个产品对象，但前端初始化Prods为数组[]，后续将单个对象赋值给Prods后，尝试调用map方法——而对象并没有map方法，这就是报错的根本原因。

另外，useEffect的依赖数组设置为[Prods]，会导致每次setProds更新状态后，重新触发useEffect调用getData，进而再次setProds，形成无限循环请求。

修复步骤 #

1. 调整状态初始化与赋值 #

将单个产品的状态初始化为null（或空对象），而非数组，同时用单数命名更贴合语义：

const [prod, setProd] = useState(null);

修改getData中的赋值逻辑，直接存储单个产品对象：

if (presponse.ok) {
  setProd(pjson);
}

2. 修正渲染逻辑 #

因为是单个产品，无需使用map，直接判断产品存在后渲染内容：

{prod && <h2>{prod.pname}</h2>}

3. 修复useEffect依赖 #

将useEffect的依赖改为searchParams.get("id")，确保只有当ID变化时才重新请求数据，彻底避免无限循环：

useEffect(() => {
  getData();
}, [searchParams.get("id")]);

完整修正后的前端代码 #

let [searchParams, setSearchParams] = useSearchParams();
const [prod, setProd] = useState(null);

const getData = async () => {
  try {
    const prodId = searchParams.get("id");
    if (!prodId) return; // 避免ID为空时发起无效请求
    const presponse = await fetch(`/api/prods/${prodId}`);
    const pjson = await presponse.json();
    if (presponse.ok) {
      setProd(pjson);
    }
  } catch (err) {
    console.error(err);
    // alert(err.message);
  }
};

useEffect(() => {
  getData();
}, [searchParams.get("id")]);

return (
  <div>
    {prod && <h2>{prod.pname}</h2>}
  </div>
);

额外验证建议 #

• 在getData中打印返回数据，确认后端返回的是单个对象而非数组：

  console.log('返回的产品数据:', pjson);
  

• 检查浏览器网络请求的响应体，确认接口返回格式符合预期。

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