Javascript 无初始状态的反应钩子

我正在从事一个项目，从API中获取一些数据，并将其作为JSON对象存储在状态挂钩中。但是，当使用

const[data，setData]=useState（[]）

初始化时，

data

显然会在fetchAPI传入正确值之前存储一个

[]

的初始值，这会在功能上造成各种问题，因为我的函数无法处理空对象

我尝试过睡眠方法、异步/等待函数，但归根结底，我必须初始化该状态。组件如下所示：

// fetchHook.js

import React, { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }

  useEffect(() => {
    fetchUrl();
  }, []);

  return [data, loading];
}

export { useFetch };

它被导入到主应用程序组件中，然后将

数据作为用户传递给另一个组件，如下所示：

// App.js
import { useFetch } from "./components/fetchHook";


function App() {
  const [users, loading] = useFetch("https://api.github.com/users");

  return (
    <div className="App">
      <Profiles users={users} count={count} />
    </div>
  );
}

//App.js
从“/components/fetchHook”导入{useFetch}；
函数App（）{
const[users，loading]=useFetch（“https://api.github.com/users");
返回(
);
}

如何确保fetch方法在返回初始状态之前始终返回有效数据？
典型的解决方案是检查
错误
和
加载
，并呈现适当的：

render（）{
返回(
装货？：
)
)

API通常返回错误和加载状态。例如，阿波罗返回对象的设计，其字段包括名称
error
和
loading

但在项目中，我们可以随意简化。例如，我们可以返回状态字段，其中包含错误和加载：

const[users，status]=useFetch（“https://api.github.com/users");
返回状态？：

您可以在
中找到许多关于API设计的想法，“如何确保fetch方法在返回初始状态之前始终返回有效数据？”你不能，但大概这就是为什么你有
加载
，因此消费者组件知道数据仍在加载。所以…？在这种情况下，使用
null
表示“无数据”是很常见的。我会将其用作
数据
的初始状态，而不是
[]
，这不仅仅是因为您获取的可能不是数组。但您仍然需要
加载
标志，因为“无数据”可能意味着“尚未有数据”或“由于错误而没有数据”