没有初始状态的反应钩子

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

它被导入到主应用程序组件上，然后将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>

您可以在此讨论中找到有关 API 设计的很多想法