没有初始状态的反应钩子

Question

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

我已经尝试过睡眠方法，async/await 函数，但这一切都归结为我必须初始化该状态。组件如下所示：

// 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 方法在返回初始状态之前总是 returns 有效数据？

Answer 1

典型的解决方案是检查 error 和 loading 并适当渲染：

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

API 通常 return 错误和加载状态。例如 apollo return 对象的设计，其字段包含名称 error 和 loading

但是在项目中我们可以随心所欲地简化。例如，我们可以 return status 字段，其中两个错误都被打包：

  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 设计的很多想法

没有初始状态的反应钩子

React hooks without initial state

javascript

reactjs

react-hooks