如何在Fetch请求完成后使用React Hook更新组件状态？

你的代码逻辑本身没问题，之所以调用setArticles(result)后立刻console.log(articles)显示的还是旧值，是因为React的useState更新函数是异步的——它不会立刻修改当前的articles变量，而是标记状态需要更新，等React处理完当前批次代码后，才会重新渲染组件，此时articles才会变成新的result数据。

而你的渲染逻辑（articles.map生成articleList）是完全正常的，当setArticles触发状态更新后，组件会自动重新渲染，articles拿到新数据后，articleList会自动更新并展示出来。

如果页面还是没渲染出内容，你可以排查这几个点：

• 确认后端返回的result是数组类型：如果后端返回的是类似{data: [文章列表]}的对象，直接setArticles(result)会让articles变成对象，map方法无法执行，这时候要改成setArticles(result.data)（具体字段名根据后端返回调整）。
• 检查ArticleCard组件是否正确接收并渲染article属性：比如子组件里有没有正确使用props.article的字段，有没有语法错误。
• 可以在组件里加个渲染日志验证：比如在const articleList = ...前面加一行console.log('渲染时的articles:', articles)，这个日志会在组件每次渲染时打印，能看到状态更新后的真实数据。

举个调整后的示例（假设后端返回结构带data字段）：

function Home(props) {
    const [articles, setArticles] = useState([]);

    useEffect(() => {       
        fetch(`http://localhost:8000/api/articles/`, {
            method: 'GET',
        })
        .then(response => response.json())
        .then(result => {
            if (result.error) {
                console.log('Error:', result.error);
                return;
            }
            console.log(result);
            // 假设后端返回的数组在result.data字段中
            setArticles(result.data);
        })
    }, [])

    const articleList = articles.map((article) =>
        <ArticleCard key={article.id} article={article} width='400'/>
    )

    return(
        <ul className="article-list">
            {articleList}
        </ul>
    )
}

export default Home;

另外注意给map生成的元素加上key属性，这是React要求的规范，避免渲染警告。

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