React前端无法展示API数据问题排查求助

问题原因 #

• 后端Express路由直接返回getCase()这个async函数，而async函数执行后返回Promise对象，res.send()无法自动解析Promise，导致前端收到空响应。
• React组件不能定义为async函数，因为React要求组件返回JSX元素，async组件会返回Promise，无法被正常渲染。
• 前端Quotes组件中：
  • getQuote直接用await赋值，导致组件初始化时就执行请求，且点击按钮时调用的是Promise对象而非函数；
  • setState后立即console.log(text)，由于setState是异步操作，无法立即获取更新后的状态值。

解决方法 #

后端修改（app.js） #

将路由处理函数改为async，等待getCase()的Promise解析完成后，返回实际的数据部分（而非整个axios响应对象）：

import express from "express";
import { getCase } from "./getCase.js";

const app = express();

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

// 改为async函数，等待getCase执行结果
app.get("/", async function (req, res) {
  console.log("app.js call getCase");
  try {
    const caseData = await getCase();
    // 返回响应中的实际数据
    res.send(caseData.data);
  } catch (error) {
    res.status(500).send(error.message || "获取数据失败");
  }
});

let port = process.env.PORT;
if (port == null || port == "") {
  port = 5000;
}

app.listen(port, function () {
  console.log(`Server started on port ${port}...`);
});

同时修正getCase.js的错误处理，抛出错误让上层捕获：

import { getToken } from "./nsApiToken.js";
import axios from "axios";

const getCase = async () => {
  let tokenRes = await getToken();

  const url =
    "https://5156735-sb1.app.netsuite.com/app/site/hosting/restlet.nl?script=860&deploy=1&recordtype=supportcase&id=717986";

  try {
    const res = await axios.get(url, {
      headers: {
        Authorization: `Bearer ${tokenRes.data.access_token}`,
      },
    });
    return res;
  } catch (error) {
    // 抛出错误，由上层路由的try/catch处理
    throw error;
  }
};

export { getCase };

前端修改（Quotes.js） #

移除组件的async标记，将数据请求封装为独立的异步函数，修正状态更新和事件绑定逻辑：

import React, { useState, useEffect } from "react";
import axios from "axios";

const Quotes = () => {
  const [text, setText] = useState(null);
  const [author, setAuthor] = useState("");
  const [error, setError] = useState("");

  // 封装异步请求函数
  const getQuote = async () => {
    try {
      const res = await axios.get("http://localhost:5000", {
        crossdomain: true,
      });
      setText(res.data);
      // 根据实际数据结构设置author，示例需自行调整
      // setAuthor(res.data.author);
      console.log("获取的数据: ", res.data);
    } catch (err) {
      setError("获取数据失败: " + err.message);
    }
  };

  // 可选：组件挂载时自动获取一次数据
  useEffect(() => {
    getQuote();
  }, []);

  return (
    <div>
      <button onClick={getQuote}>获取数据</button>
      {error && <p style={{color: 'red'}}>{error}</p>}
      {text ? (
        <div>
          <h1>{JSON.stringify(text)}</h1>
          {/* <h3>{author}</h3> */}
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

export default Quotes;

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