在 React 客户端中使用 useEffect() 运行 fetch(URL) 时获取 NULL / 空数据

Question

我构建了一个可靠地支持 API

的 NodeJS 服务器

http://localhost:5000/record/gopa

returns 一个格式正确的 JSON 字符串

{"pid":
  {
   "ck":"F1965121910:265.522.5788.37",
   "name":"gopa",
   "cID":"MVOE9BW5ZZOC"
   }
}

我已经构建了一个 ReactJS 客户端来接收这个 JSON 输出并将其转换为字符串以供后续处理，如下所示：

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() {
   //const response = await fetch(`http://localhost:5000/record/${params.id.toString()}`);
   const response = await fetch(`http://localhost:5000/record/gopa}`);
 
     if (!response.ok) {
       const message = `An error occurred: ${response.statusText}`;
       window.alert(message);
       return;
     }
     
     const dbdata = await response.json();
     window.alert(JSON.stringify(dbdata));
     setData(dbdata);
     //setData('fake data')
   }
   getData();
   return;
 },[dbdata]);
 
 return (
   <div>
     <h3>Detail 52</h3>     
       <p>{dbdata}</p>
       <p>{JSON.stringify(dbdata)}</p>
   </div>
 );
 
}

执行时，我在 dbdata 中得到 NULL 值，当我将 JSON 输出转换为一个字符串。
我最初的印象是 ${params.id.toString()} 没有被正确传递，所以暂时我硬编码了参数，效果是一样的。
我已经通过在获取 dbdata 后发出警报来测试它，它显示 null
为了完成测试，我还使用 setData() 函数放置了一个 'fake data'，这个假数据正确反映在最终输出。
所以，我认为，问题不在于 setData()，而是返回了一个空字符串。
我已经为此苦苦挣扎了很长一段时间，我认为我已经将问题定位了。如果有人能帮我解决这个问题，将不胜感激。

Answer 1

首先我认为你插入了错误的 URL 因为你在它的末尾有一个括号:

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

我看到你在等待两次你的对象：

获取后的第一个：

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

第二个（似乎没有必要）：

const dbdata = await response.json();
// How it should be:
const dbdata = response.json();

能否请您将回复的内容记录下来，以了解这是问题所在还是问题来自您的代码的另一部分？如果是这样，我将编辑 post

在 React 客户端中使用 useEffect() 运行 fetch(URL) 时获取 NULL / 空数据

Getting NULL / empty data when running fetch(URL) with useEffect() in React client

reactjs

fetch-api

use-effect