Question

您好，我尝试构建一个从API提取数据的应用程序。我使用SWR挂钩获取数据

// libs/fetch.js
import fetch from "isomorphic-unfetch"

export default async function(...args) {
  const res = await fetch(...args)
  return res.json()
}

// App.js
import React, { useEffect } from "react"
import "./styles.css"
import useSWR from "swr"
import fetch from './libs/fetch'

export default function App() {
  const url = "https://data.grandpoitiers.fr/api/records/1.0/search/?dataset=mobilites-stationnement-des-parkings-en-temps-reel&facet=Places_restantes"
  const { data, error } = useSWR(url, fetch)
  return (
    <div className="App">
      {JSON.stringify(data)}
    </div>
  )
}

我无法访问数据值。当我尝试data.records时会返回Cannot read property 'records' of undefined

我不知道该怎么办，我进行了搜索，但是找不到答案。

编辑器： https://codesandbox.io/s/github/MattixNow/PoitiersParker/tree/80871ba94769346a7008312bdb6e4c1143e591a3

有人可以帮助我吗？感谢您的答复

Answer 1

根据文档，您必须处理错误和加载案例

export default function App() {
    const url =
        "https://data.grandpoitiers.fr/api/records/1.0/search/?dataset=mobilites-stationnement-des-parkings-en-temps-reel&facet=Places_restantes"
    const { data, error } = useSWR(url, fetch)

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>

    return (
        <div className="App">

            {JSON.stringify(data.records)}
        </div>
    )
}

Answer 2

在从服务器获取数据之前，先运行JSON.stringify（data.records）或并发运行。发生错误，因为它是在从服务器获取数据之前执行的。

  <div className="App">

      {
        data&&

        JSON.stringify(data.records)
      }

  </div>

无法通过SWR获取访问我的数据-React

2 个答案: