React Hooks - 处理异步 api 调用

Question

我正在尝试设置一个自定义钩子来处理我项目中的所有 api 获取。我可以成功进行调用，并存储数据，但只能在第一次调用之后进行调用。我很有信心，由于竞争条件和异步的性质，第一次调用不会返回任何内容。

这是我的钩子：

import { useState, useEffect } from 'react'
import api from 'services/api'
const useHopServiceApi = () => {
const [data, setData] = useState([])
const [url, setUrl] = useState('')
const [body, setBody] = useState({})
const [isLoading, setIsLoading] = useState(false)
const [isError, setIsError] = useState(false)
useEffect(() => {
const fetchData = async () => {
setIsError(false)
setIsLoading(true)
try {
const result = await api.post(url, body)
setData(result.d)
} catch (error) {
setIsError(true)
}
setIsLoading(false)
}
if (url && body) {
fetchData()
}
}, [url, body])
return [{ data, isLoading, isError }, setUrl, setBody]
}
export default useHopServiceApi

以及调用它的组件：

const HomePage = (props) => {
const [{ data, isLoading, isError }, doFetch, setBody] = useHopServiceApi()
const handleClickSelectInterests = () => {
setBody({ count: 1 })
doFetch('/GetPopularCities')
console.log('data:', data)
}
}

当我单击按钮(以触发 api 调用(时，数据将作为空数组注销，但在随后的单击中，它被填充为数据。

Answer 1

第一次单击后看不到数据的原因是，在调用数据后，您还没有立即从doFetch中获得数据。

第二次单击按钮调用handleClickSelectInterests将记录数据，但它是第一次呈现中的数据。您可以很好地呈现更新的数据，但无法在handleClick函数中记录最新的内容。

这里有一个例子来说明我的意思：

代码沙箱示例

根组件：

import React from "react";
import ReactDOM from "react-dom";
import useHopServiceApi from "./useHopServiceApi";
import "./styles.css";
function App() {
const [{ data, isLoading, isError }, doFetch] = useHopServiceApi();
console.log("Data in render!", data);
const handleClick = () => {
doFetch("/fakeUrl");
// Data logged below will show the data from the previous request, not the latest
console.log("Data in handle click!", data);
};
return (
<div className="App">
{isLoading && <div>Is loading!</div>}
<button onClick={handleClick}>Simulate fetch!</button>
{data && <div>Data! {data}</div>}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您的钩子：

import { useState, useEffect } from "react";
let numClick = 1;
const simulatedFetch = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve(`Fetch request data for request number ${numClick}`);
numClick++;
}, 2000);
});
};
const useHopServiceApi = () => {
const [data, setData] = useState([]);
const [url, setUrl] = useState("");
const [body, setBody] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await simulatedFetch();
console.log("new result!", result);
setData(result);
setUrl("");
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
if (url) {
fetchData();
}
}, [url, body]);
return [{ data, isLoading, isError }, setUrl, setBody];
};
export default useHopServiceApi;

上面的示例显示，您可以在 render 函数中使用最新数据，即使您无法将其记录在handleClick函数中也是如此。

Answer 2

从文档中：

setState 函数用于更新状态。它接受新的状态值，并将组件的重新呈现排队。

在第一次单击时，会查询钩子更新，并在执行状态更新之前到达控制台.log('data：'，data(，因此记录空数据。

您应该将控制台.log放在函数的其他位置，以便更好地掌握执行顺序