ReactJS页面加载早于GET请求导致状态为空数组的问题求助

你的代码存在两个核心问题，同时我们可以通过async/await优化异步逻辑，还能增加状态提升用户体验：

问题点梳理 #

• 重复引入Axios：已经在顶部通过import axios from 'axios'引入，无需在useEffect里再次用require导入，属于冗余操作。
• Promise链返回值丢失：第一个.then仅做了日志打印，但没有返回response，导致后续.then拿到的参数是undefined，调用response.data.articles会直接报错，无法正常更新state。

写法一：修复Promise链逻辑 #

import { useEffect, useState } from 'react';
import axios from 'axios';

function NewsPage(){
    const [news, setNews] = useState([]);
    const [loading, setLoading] = useState(true); // 新增加载状态
    const [error, setError] = useState(null); // 新增错误捕获状态

    useEffect(() => {    
        const options = {
            method: 'GET',
            url: 'https://api.newscatcherapi.com/v2/search',
            params: {q: 'obama', lang: 'en', sort_by: 'relevancy', page: '1'},
            headers: {
                'x-api-key': '**************'
            }
        };

        axios.request(options)
        .then(function (response) {
            console.log(response.data.articles);
            return response; // 必须返回response，让下一个then能获取到数据
        })
        .then(response => setNews(response.data.articles))
        .catch(function (error) {
            console.error(error);
            setError(error.message); // 捕获错误并更新状态
        })
        .finally(() => {
            setLoading(false); // 请求结束（成功/失败）后关闭加载状态
        });
    },[]);

    // 根据状态渲染对应内容
    if (loading) return <div>加载中...</div>;
    if (error) return <div>请求出错：{error}</div>;

    return (
        <div>
            Hello
            {news.map((eachnews) => (
                <div key={eachnews.title}>
                    <h2>{eachnews.author || '匿名作者'}</h2> {/* 处理作者为空的情况 */}
                </div>
            ))}
        </div>
    )
}

export default NewsPage

写法二：使用async/await（更直观的异步逻辑） #

import { useEffect, useState } from 'react';
import axios from 'axios';

function NewsPage(){
    const [news, setNews] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {    
        // useEffect回调不能直接是async，所以内部定义异步函数
        const fetchNews = async () => {
            try {
                const options = {
                    method: 'GET',
                    url: 'https://api.newscatcherapi.com/v2/search',
                    params: {q: 'obama', lang: 'en', sort_by: 'relevancy', page: '1'},
                    headers: {
                        'x-api-key': '**************'
                    }
                };

                const response = await axios.request(options);
                console.log(response.data.articles);
                setNews(response.data.articles);
            } catch (err) {
                console.error(err);
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchNews();
    },[]);

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

    return (
        <div>
            Hello
            {news.map((eachnews) => (
                <div key={eachnews.title}>
                    <h2>{eachnews.author || '匿名作者'}</h2>
                </div>
            ))}
        </div>
    )
}

export default NewsPage

额外优化说明 #

1. 新增loading状态：请求完成前显示加载提示，避免页面仅显示"Hello"无内容的尴尬。
2. 新增error状态：捕获请求错误并展示，方便调试和提升用户体验。
3. 处理author为空的情况：用|| '匿名作者'做兜底，避免渲染空标题。

内容的提问来源于stack exchange，提问作者Çağlar Öksüzoğlu