Question

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

Answer 1

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

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

API通常返回错误和加载状态。例如，设计的阿波罗返回对象的字段包含名称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设计的很多想法

反应钩子没有初始状态

1 个答案: