React useEffect API 调用返回未定义

Question

我正在尝试使用 UseEffect 向 React 中的后端 API 发出获取请求。但我的数据未定义。当我控制台记录我的 res.json() 时，我得到一个待处理的、已履行的承诺，所以我认为这意味着我走在正确的轨道上。

但是，在这一步之后，它返回未定义。

这是我的错误：

TypeError: Cannot read properties of undefined (reading 'map')

这是我的代码。请帮忙！

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

const Index = (props) => {
    // let data = useLoaderData()

    const[data, setData] = useState([])
    useEffect(() => {
        fetch("https://backendurl.com/data", {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            }
        }).then((res) => {
            console.log(res.json())
        }).then((data) => {
            setData(data)
        }).catch((error) => console.log(error))
    })

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

export default Index

Answer 1

您正在尝试映射空数组。这是主要问题。这是由于 useEffect 更新了状态，但组件重新渲染为状态已更改而导致的。然而，你useEffect再次运行，就陷入了循环。您必须为 useEffect 提供依赖项数组，并且依赖项数组应该为空 []。通过这样的声明，您是在告诉 useEffect 仅运行一次。