React中useEffect请求接口返回200，状态数组仍为空的问题

问题核心 #

• React状态更新是异步操作，调用setpost后立刻执行console.log(post)，此时状态还未完成更新，打印的是初始的空数组。
• 代码同时混用await和.then()，冗余且易造成逻辑混乱。

修正后的代码 #

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

function News() {
    // 采用社区通用的驼峰命名规范
    const [post, setPost] = useState([])

    useEffect(()=>{
        getNews()
    }, [])
    
    async function getNews(){
        try {
            // 仅用await处理异步请求，逻辑更清晰
            const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
            setPost(response.data);
        } catch (error) {
            console.error('文章数据请求失败:', error);
        }
    }

    // 监听post状态变化，状态更新后再执行打印
    useEffect(() => {
        console.log('更新后的文章数据:', post);
    }, [post]);

    return (
        <div className="main">
            <div className="main__name">
                <h1>New</h1>
            </div>
            <div className="main__post">
                {/* 渲染获取到的文章数据 */}
                {post.map(item => (
                    <div key={item.id} className="post-item">
                        <h3>{item.title}</h3>
                        <p>{item.body}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}
export default News;

关键说明 #

1. 异步状态更新：React不会同步更新状态，setPost只是标记状态需要更新，组件会在下一次渲染周期中完成状态更新。因此要查看更新后的状态，需要通过useEffect监听post的变化，当状态改变时触发打印逻辑。
2. 异步请求规范：await是Promise的语法糖，和.then()混用会让代码逻辑冗余且难以维护，推荐使用await + try/catch的组合处理异步请求的成功与失败场景。
3. 命名规范：状态更新函数采用驼峰命名（如setPost）是React社区通用的编码规范，能有效提升代码的可读性和可维护性。

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