javascript - 没有初始状态的 react 钩子(Hook)

Question

我正在从事一个项目，我从 API 获取一些数据并将其作为 JSON 对象存储在状态 Hook 中。然而，当使用 const [data, setData] = useState([]) 初始化时，显然，data 存储了 [] 的初始值fetchAPI 传递了正确的值，这导致了功能上的各种问题，因为我的函数无法处理空对象。

我尝试过 sleep 方法、异步/等待函数，但这一切都归结为我必须初始化该状态。组件如下所示:

// 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 组件上，然后将 data 作为用户传递给另一个组件，如下所示:

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

如何确保 fetch 方法在返回初始状态之前始终返回有效数据？

Answer 1

典型的解决方案是检查error 和loading 并正确渲染:

  render() {
    return (
      loading ? <Loading/> :
      <div className="App">
        <Profiles users={users} count={count} />
      </div>
    )
  )

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

但在项目中我们可以随心所欲地简化。例如，我们可以返回状态字段，其中错误和加载都已打包:

  const [users, status] = useFetch("https://api.github.com/users");
  return status ? <Loading {...{status}}/> :
    <div className="App">
      <Profiles users={users} count={count} />
    </div>

您可以在 this discussion 中找到很多关于 API 设计的想法