useFetch自定义钩子以某种方式返回数据两次如何修复？

Question

就像标题说的useFetch自定义钩子，我做了两次返回数据，我的意思是什么。当我console.log我获取的数据有两个输出，其中一个是空值，另一个是我想要的数据，因为有空值的数据，这是一个问题，因为我不能实现包含我想要的数据的表。下面是代码：

import { useState, useEffect } from "react";
import axios from "axios";
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

这就是我想使用我获取的数据的地方：

import React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import useFetch from "./custom_hooks/useFetch";

const TableComponent = () => {
  const { data, loading, error } = useFetch(
    "https://gorest.co.in/public/v1/users?page=1"
  );

  if (loading) return <h1> LOADING...</h1>;

  if (error) console.log(error);

  console.log(data);

  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>User Names</TableCell>
            <TableCell align="right">Email</TableCell>
            <TableCell align="right">Status</TableCell>
            <TableCell align="right">Gender</TableCell>
            <TableCell align="right">ID</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.data.map((user) => {
            return (
              <TableRow>
                <TableCell>{user.name}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default TableComponent;

当我刷新页面时，有一个错误“数据为空”，如何修复？

Answer 1

你的钩子不能很好地管理它的内部状态。例如，如果读取错误，它永远不会取消错误。）此外，如果您更改了URL，钩子可能会因为先前的效果先完成而导致错误URL的数据。

因此，最好只查看您是否有数据，而不要相信其他标志是正确的：

const { data, loading, error } = useFetch("https://gorest.co.in/public/v1/users?page=1");
if(error) return <>Error: {String(error)}</>;
if(!data) return <h1>LOADING...</h1>;

除此之外，您可能还想查看一个为您正确执行状态管理、缓存等操作的库；在撰写本文时，我建议swr或react query。。。