没有初始状态的反应钩子答案

【问题标题】：React hooks without initial state没有初始状态的反应钩子
【发布时间】：2019-07-05 08:36:33
【问题描述】：

我正在从事一个项目，我从 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 组件上，然后将 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 方法在返回初始状态之前始终返回有效数据？

【问题讨论】：

“我怎样才能确保 fetch 方法在返回初始状态之前总是返回有效数据？” 你不能，但大概这就是为什么你有loading，所以消费者组件知道数据仍在加载。所以...？
在这种情况下使用null 表示“没有数据”是相当普遍的。我会将其用作data 的初始状态，而不是[]，尤其是因为您获取的可能不是数组。但是您仍然需要 loading 标志，因为“没有数据”可能意味着“还没有数据”或“由于错误而没有数据”。

标签： javascript reactjs react-hooks

【解决方案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 设计的很多想法

【讨论】：