React客户端使用useEffect调用fetch(URL)获取数据返回NULL/空值问题求助

让我来帮你解决这个问题！从你的代码和描述来看，有几个明显的问题需要逐一修复：

1. 最关键的笔误：请求URL多了一个多余的大括号 #

你当前的fetch URL是：

const response = await fetch(`http://localhost:5000/record/gopa}`);

注意末尾多了一个}，这会导致请求的是一个不存在的接口地址，服务器自然无法返回正确的JSON数据，这就是你拿到null的核心原因！

把URL修正为正确的地址：

const response = await fetch(`http://localhost:5000/record/gopa`);

2. 修复useEffect的无限循环问题 #

你的useEffect依赖数组里包含了dbdata，这会导致组件陷入无限重渲染：每次调用setData(dbdata)都会更新dbdata状态，进而触发useEffect重新执行，再次发起fetch请求，如此循环往复。

如果是硬编码请求（像你现在这样），可以把依赖数组设为空数组，让副作用只在组件挂载时执行一次：

useEffect(() => {
  // ... 你的getData函数
}, []); // 空数组表示仅在组件挂载时执行

如果以后要恢复动态参数params.id，把依赖改成[params.id]即可，这样只有当params.id变化时才会重新发起请求。

3. 完善错误捕获逻辑 #

当前代码只检查了response.ok，但如果JSON解析失败（比如请求错误地址返回了HTML页面），会抛出未捕获的错误，导致后续代码无法执行。建议给async函数加上try/catch，全面捕获请求和解析过程中的错误：

async function getData() {
  try {
    const response = await fetch(`http://localhost:5000/record/gopa`);
    if (!response.ok) {
      const message = `An error occurred: ${response.statusText}`;
      throw new Error(message);
    }
    const dbdata = await response.json();
    window.alert(JSON.stringify(dbdata));
    setData(dbdata);
  } catch (error) {
    window.alert(`请求失败：${error.message}`);
    console.error(error); // 在控制台查看详细错误信息
  }
}

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import { useParams } from "react-router";

export default function Detail52() {
  const params = useParams();
  const [dbdata, setData] = useState('empty52');

  useEffect(() => {
    async function getData() {
      try {
        // 恢复动态参数的话，改成下面这行：
        // const response = await fetch(`http://localhost:5000/record/${params.id}`);
        const response = await fetch(`http://localhost:5000/record/gopa`);
        if (!response.ok) {
          const message = `An error occurred: ${response.statusText}`;
          throw new Error(message);
        }
        const fetchedData = await response.json();
        window.alert(JSON.stringify(fetchedData));
        setData(fetchedData);
      } catch (error) {
        window.alert(`请求失败：${error.message}`);
        console.error(error);
      }
    }
    getData();
  }, []); // 空数组避免无限循环

  return (
    <div>
      <h3>Detail 52</h3>
      <p>{typeof dbdata === 'object' ? JSON.stringify(dbdata) : dbdata}</p>
      <p>{JSON.stringify(dbdata)}</p>
    </div>
  );
}

另外，注意在渲染时，如果dbdata是对象，直接用<p>{dbdata}</p>会显示[object Object]，所以我在代码里加了一个判断，把对象转为字符串显示，这样更友好。

按照上面的步骤修改后，应该就能正常获取到服务器返回的JSON数据了！

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