React中Fetch POST API返回[object Object]的问题排查咨询

你看到的[object Object]是JavaScript字符串与对象拼接时的默认行为：当用+连接字符串和对象时，JS会自动调用对象的toString()方法，而普通对象的默认toString()返回值就是[object Object]。实际上你已经成功获取到了API返回的JSON数据，只是打印方式不对。

解决方法 #

有几种正确的方式可以打印出对象的具体内容：

1. 分开传递参数给console.log
   控制台会自动展开对象，方便查看完整结构：

   console.log("json", json);
   

2. 将对象转为JSON字符串
   用JSON.stringify()把对象转成字符串后再拼接：

   console.log("json " + JSON.stringify(json));
   // 或者用模板字符串写法
   console.log(`json ${JSON.stringify(json)}`);
   

额外优化建议 #

你的代码里useState初始值设为空字符串''，但后续要存储的是对象，建议改成null或空对象{}，这样后续渲染时可以更方便地判断数据状态：

const [userInfo, setuserInfo] = useState(null);

另外，当前返回部分<>userInfo</>不会渲染出实际数据，要展示userInfo的内容可以这样写（先判断数据是否加载完成）：

return (
  <>
    {userInfo ? (
      <div>
        <p>用户ID：{userInfo.userId}</p>
        <p>邮箱：{userInfo.keyPropertiesList[0].properties.userDetail.email}</p>
      </div>
    ) : (
      <p>加载中...</p>
    )}
  </>
);

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