React新手求助：useEffect调用工具函数后无法更新组件状态

问题根源 #

你的ThingsAPI.getAll方法标记了async，但内部调用fetch时没有返回这个Promise链，导致async函数默认返回一个resolve为undefined的Promise。所以组件中.then接收到的参数自然是undefined，尽管API内部已经拿到了数据。

修复方案 #

方案1：返回fetch的Promise链 #

修改ThingsAPI.js中的getAll方法，在fetch前添加return，让async函数返回整个Promise链：

export const ThingsAPI = {
    getAll: async function() {
        // 加上return，将fetch的Promise链作为函数返回值
        return fetch(URL_STRING)
            .then((response) => {
                console.log("返回response.json()")
                return response.json();
            })
            .then( data => {
                console.log("返回data")
                return data
            })
    },
    // ...其他方法
}

方案2：用async/await改写（更易读） #

把Promise链换成async/await语法，逻辑更清晰：

export const ThingsAPI = {
    getAll: async function() {
        const response = await fetch(URL_STRING);
        console.log("返回response.json()");
        const data = await response.json();
        console.log("返回data");
        return data;
    },
    // ...其他方法
}

额外优化：增加错误处理 #

为了避免请求失败时没有反馈，建议在API和组件中都添加错误处理：

API层添加错误捕获 #

getAll: async function() {
    try {
        const response = await fetch(URL_STRING);
        // 检查响应状态是否正常
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        console.log("返回response.json()");
        const data = await response.json();
        console.log("返回data");
        return data;
    } catch (error) {
        console.error('获取数据失败:', error);
        throw error; // 抛出错误让组件可以处理
    }
}

组件层捕获错误 #

useEffect(() => {  
    ThingsAPI.getAll()
        .then((things) => {
            setThings(things);
            console.log("setThings(things) = ", things);
        })
        .catch(error => {
            console.error('加载数据出错:', error);
            // 这里可以设置错误状态，比如显示错误提示给用户
        });
}, [])

内容的提问来源于stack exchange，提问作者Martin Van Nostrand