Javascript React Query useQuery无法读取未定义的属性数据

这是我在codepan中的代码：

我不知道为什么它有时在读取未定义的属性数据时会抛出一个无法读取该属性数据的错误

我已在我的公用文件夹中创建了一个json文件：

[
  {
    "id": 0,
    "name": "John",
    "lastName": "Doe",
    "address": "Main Street",
    "gender": "male",
    "country": "USA",
    "city": "LA"
  },
  {
    "id": 1,
    "name": "Michael",
    "lastName": "Zeburgee",
    "address": "Second Street",
    "gender": "male",
    "country": "Germany",
    "city": "Hamburg"
  },
  {
    "id": 3,
    "name": "Julia",
    "lastName": "Hleb",
    "address": "St.Patric",
    "gender": "female",
    "country": "Belarus",
    "city": "Minsk"
  },
  {
    "id": 4,
    "name": "Petar",
    "lastName": "Pan",
    "address": "Some Street",
    "gender": "male",
    "country": "UK",
    "city": "London"
  }
]

我有一个axios请求：

import axios from "axios";

export default async function getPersonsInfo() {
  const response = await axios.get("persons.json");
  return response;
}

有一个人员组成部分：

import React, { useState } from "react";
import { useQuery } from "react-query";
import getPersonsInfo from "../api/personCalls";

export default function Persons() {
  const [persons, setPersons] = useState([]);
  const { data: personsData, status } = useQuery(
    "personsData",
    getPersonsInfo,
    {
      onSuccess: () => {
        setPersons(personsData.data);
      },
      onError: (error) => {
        console.log(error);
      }
    }
  );

  return (
    <>
      {status === "loading" ? (
        <div>Loading ... </div>
      ) : (
        <div>
          {persons.map((person) => (
            <div>
              <p>{person.name}</p>
              <p>{person.lastName}</p>
              <p>{person.address}</p>
              <p>{person.gender}</p>
              <p>{person.country}</p>
              <p>{person.city}</p>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

---

你可以在codepan中看到。首先，当您打开正在加载的文件时。。。和获取数据，但一旦你刷新页面，它就不能

只需从onSuccess回调获取数据：

onSuccess: (data) => {
        console.log('data',data)

---

查看记录的数据，然后使用setPersons将需要的数据设置为状态。

您不需要状态，

useQuery

已经管理状态。直接使用

data:personData

就可以了。你能更新代码吗，因为又出了问题，personsData.map不是函数有一个错误。在查询完成之前，

data

不是数组，所以你必须提供某种考虑到这一点的默认状态，比如

（data |[]）.map（/*…*/）

那么为什么我要使用这个三元运算符{status===“loading”？如果它正在执行它，即使它不完整！？而且我不能正确运行它，即使我不能理解。你的意思是（Peronanda | |[]）.map？因为又出现错误。你能在codepan中更新我的代码吗，因为它引发了一个错误，personsData.map不是函数…我没有在codesandbox中更改你的代码。。。

onSuccess: (data) => {
        console.log('data',data)