React项目中fetch请求返回undefined，求助解决方法

核心问题出在你的fetch请求链中：第一个.then回调处理响应时，没有返回res.json()的结果，导致下一个.then接收的data是undefined。

修正后的代码 #

import { useState, useEffect } from 'react';
import './Sidebar.css'
import TagsList from './TagsList';

const Sidebar = () => {
    const [tags, setTags] = useState([]);
    useEffect(()=>{
        fetch('http://localhost:8000/tags')
        // 必须返回res.json()，才能把解析后的数据传递给下一个then
        .then(res=> res.json())
        .then(data =>{
            console.log(data);
            // 获取到数据后更新状态，让组件渲染标签列表
            setTags(data);
        })
        // 新增错误捕获，避免请求失败时控制台无提示
        .catch(err => {
            console.error('获取标签失败:', err);
        })
    }, [])
    return (
        <div className="side-content">
        <div className="side-cont">
        <div>Search (<a href="#">advanced</a>)</div>
        <input type="text" />
        <div>Hidden posts 0</div>
        <div>
            <TagsList tags={tags} title="Tags" />
        </div>
        </div>
        </div>
    );
}
 
export default Sidebar;

额外排查点 #

• 确认http://localhost:8000/tags接口能正常返回JSON格式的数据，可直接在浏览器地址栏访问该URL检查返回内容
• 如果浏览器控制台出现跨域相关错误，需在后端配置CORS允许前端域名访问
• 检查网络请求状态：打开浏览器开发者工具的Network面板，查看tags请求的状态码（200表示成功，4xx/5xx表示后端出错）

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