React Query useQuery 无法读取 undefined 的属性数据答案

【问题标题】：React Query useQuery cannot read property data of undefinedReact Query useQuery 无法读取 undefined 的属性数据
【发布时间】：2021-02-01 16:20:41
【问题描述】：

这是我在 codepan 中的代码：https://codesandbox.io/s/relaxed-drake-4juxg?file=/src/Persons/persons.jsx

我不知道为什么有时在读取时会抛出无法读取 undefined 属性数据的错误！

我在公用文件夹中创建了一个 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;
}

有一个 Persons 组件：

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>
      )}
    </>
  );
}

问题是它无法读取数据，但是如果我 console.log(personsData) 有数据。

onSuccess: () => {
        setPersons(personsData.data);
      },

您可以在代码盘中看到。首先，当您打开文件时，它正在加载...并获取数据，但是一旦您刷新页面，它就不能了！

【问题讨论】：

你不需要状态，useQuery 已经管理了状态。直接使用data: personData即可。
能不能更新一下代码，因为又出错了，有错误说personsData.map不是函数。
在查询完成之前，data 不是一个数组，因此您必须提供某种考虑到这一点的默认状态，例如 (data || []).map(/* ... */)
那么我为什么要使用这个三元运算符 {status === "loading" ？
Loading ...
: (/* ... */)，如果它正在执行它，即使它没有完成！？我再次无法正常运行它，即使我无法理解。你的意思是 (peronData || []).map 吗？导致又出现错误。

标签： javascript reactjs

【解决方案1】：

只需从 onSuccess 回调中获取数据：

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

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

【讨论】：

你能在codepan中更新我的代码吗，因为它会抛出personsData.map不是函数的错误......