React中useEffect调用API返回undefined问题求助

错误原因分析 #

1. Promise链断裂：你在第一个.then里仅打印了res.json()，但没有返回这个Promise，导致后续.then接收的data是undefined，最终setData(undefined)，触发Cannot read properties of undefined (reading 'map')错误。
2. useEffect无依赖数组：当前useEffect未设置依赖项，会在组件每次渲染时重复发起请求，造成性能损耗。

修复后的代码 #

import { useState, useEffect } from "react"
import ReactPaginate from "react-paginate"
import Record from "../components/Record"
import FieldName from "../components/FieldName"

const Index = (props) => {
    const [data, setData] = useState([])
    // 可选：增加loading状态优化用户体验
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(null)

    useEffect(() => {
        const fetchData = async () => {
            try {
                const res = await fetch("https://backendurl.com/data", {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    }
                })
                // 检查请求是否成功
                if (!res.ok) {
                    throw new Error(`请求失败：${res.status}`)
                }
                const fetchedData = await res.json()
                setData(fetchedData)
            } catch (err) {
                setError(err.message)
                console.error(err)
            } finally {
                setLoading(false)
            }
        }

        fetchData()
    }, []) // 空依赖数组确保仅组件挂载时执行一次请求

    // 处理加载、错误状态
    if (loading) return <div>加载中...</div>
    if (error) return <div>出错了：{error}</div>

    return (
        <div className="records">
            {data.map((record) =>
                <Record record={record} key={record.record_id} />
            )}
        </div>
    )
}

export default Index

关键修改说明 #

• 用async/await替代链式.then，代码更易读，也更方便处理错误和状态检查
• 增加res.ok判断，处理后端返回非200状态码的异常情况
• 添加loading和error状态，避免用户看到空白或直接报错的界面
• 给useEffect设置空依赖数组[]，限定请求仅在组件挂载时执行一次

额外注意事项 #

• 确认后端API返回的是数组格式，如果返回的是包含数组的对象（比如{ list: [...] }），需要调整代码提取对应字段，例如setData(fetchedData.list)
• 检查请求URL是否正确，是否存在跨域问题（本地开发时若后端未配置CORS，需在项目中配置代理）

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