React API调用结果仅控制台显示及模块引入问题求助

原始Fetch调用问题 #

问题描述 #

正在学习React，已成功发起API调用，但返回结果仅能在控制台打印。查阅的示例多推荐使用setData(json)绑定数据，但因API文件采用export async function形式无法使用该方法。相关代码如下：

API函数代码：

export async function GetHellWorld() {
    return fetch(`http://localhost:8080/api`, {
        method: "Get",
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    }).then(response => response.json())
        .then(json => {
            console.log(json)
        })
        .catch(error => (console.log(error)))
}

组件代码：

function Test(thisArg, argArray) {

    const result = GetHellWorld.apply()

    return (
        <div className="App">
            {JSON.stringify(result)}
        </div>
    );
}

export default Test;

控制台能显示"Hello World"，但页面仅输出{}。有两个问题：

1. 如何将JSON响应绑定到对象，以便通过result.name这类形式访问数据？
2. 使用const result = GetHellWorld.apply()调用异步函数是否正确？

解答 #

问题1：绑定JSON响应到组件状态

你的API函数GetHellWorld里，.then(json => {console.log(json)})没有把json返回出去，导致函数最终返回undefined。首先修正API函数，让它返回获取到的json：

export async function GetHellWorld() {
    return fetch(`http://localhost:8080/api`, {
        method: "Get",
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    })
    .then(response => response.json())
    .then(json => {
        console.log(json);
        return json; // 必须返回json，否则函数无有效返回值
    })
    .catch(error => {
        console.log(error);
        throw error; // 抛出错误，方便组件处理
    })
}

然后在React组件中，用useState保存数据，useEffect发起异步请求（不能直接在组件渲染时调用异步函数，会引发无限重渲染）：

import React, { useState, useEffect } from 'react';
import { GetHellWorld } from './path-to-your-api-file'; // 替换为实际文件路径

function Test() {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const result = await GetHellWorld();
                setData(result); // 将响应数据存入状态
            } catch (err) {
                setError(err);
            }
        };

        fetchData();
    }, []); // 空依赖数组表示仅在组件挂载时执行一次

    if (error) return <div>请求出错：{error.message}</div>;
    if (!data) return <div>加载中...</div>;

    return (
        <div className="App">
            {/* 现在可通过data.name访问属性 */}
            <p>响应内容：{data.name}</p>
            <p>完整响应：{JSON.stringify(data)}</p>
        </div>
    );
}

export default Test;

问题2：异步函数调用是否正确

GetHellWorld.apply()写法错误。apply用于指定函数的this上下文和参数数组，但你的GetHellWorld不需要this，也无参数，直接调用GetHellWorld()即可。更关键的是，异步函数调用返回Promise，不能直接赋值给result，必须用await或.then()获取结果——这也是之前页面输出{}的核心原因：你直接打印了Promise对象，而非最终响应数据。

更新后的Axios实现问题 #

问题描述 #

因需在单个文件发起多API调用，尝试改用axios实现，代码如下：

服务类代码：

const axios = require('axios');

export class AppService {

    public async GetHelloWorld(): Promise<any> {
        const response = await axios.get(`http://localhost:8080/api`, {
            method: "Get",
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            }
        }).catch(() => console.log("Issue in GetHelloWorld"))

        return response.data
    }

}

组件代码：

import React from 'react';
import {AppService} from "../services/app.service";

function Movies() {

    const api = new AppService()

    const hello = async () => {
        const response = await api.GetHelloWorld();
        console.log("The response: " + response)
    }

    return (
        <div className="App">
            {JSON.stringify(hello)}
        </div>
    );
}

注：已添加TypeScript支持。

但出现错误：

Module not found: Error: Can't resolve '../services/app.service' in '/Users/miketye/programming/test-react/src/components'

解答 #

1. 模块导入错误解决

该错误表示React找不到指定路径的文件，检查以下几点：

• 确认文件路径：组件在src/components目录，../services/app.service对应src/services文件夹下的app.service.ts（或.tsx）文件需真实存在。
• 确认文件名大小写：macOS/Linux系统区分文件名大小写，需保证导入路径与实际文件名完全匹配。
• 确认文件扩展名：TypeScript项目中，可在导入时添加完整扩展名（如import {AppService} from "../services/app.service.ts"），或检查tsconfig.json中moduleResolution配置是否正确。

2. Axios服务类优化

你的GetHelloWorld方法中，.catch()会返回resolved状态的Promise，导致response可能为undefined，访问response.data会报错。应将错误处理放在try/catch中：

import axios from 'axios'; // 改用ES模块导入，符合React+TS规范

export class AppService {
    public async GetHelloWorld(): Promise<any> {
        try {
            const response = await axios.get(`http://localhost:8080/api`, {
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                }
                // axios.get默认是GET方法，无需重复指定
            });
            return response.data;
        } catch (error) {
            console.log("Issue in GetHelloWorld", error);
            throw error; // 抛出错误，交由组件处理
        }
    }
}

3. 组件中正确使用服务类

和Fetch示例逻辑一致，需用useState和useEffect管理异步数据，不能直接渲染异步函数：

import React, { useState, useEffect } from 'react';
import { AppService } from "../services/app.service";

function Movies() {
    const [helloData, setHelloData] = useState<string | null>(null);
    const [error, setError] = useState(null);
    const api = new AppService();

    useEffect(() => {
        const fetchHello = async () => {
            try {
                const response = await api.GetHelloWorld();
                setHelloData(response);
                console.log("The response: ", response);
            } catch (err) {
                setError(err);
            }
        };

        fetchHello();
    }, [api]); // 依赖api实例

    if (error) return <div>请求出错：{error.message}</div>;
    if (!helloData) return <div>加载中...</div>;

    return (
        <div className="App">
            <p>响应内容：{helloData}</p>
        </div>
    );
}

export default Movies;

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