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 函数中记录最新的内容。

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

Code sandbox example

根组件：

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;

上面的例子表明你可以在渲染函数中使用最新的数据，即使你不能在handleClick函数中记录它

Answer 2

来自docs：

setState 函数用于更新状态。它接受一个新的状态值并将组件的重新渲染排入队列。

第一次点击时，钩子更新被enqued，并且在执行状态更新之前到达了console.log('data:', data)，因此记录了空数据。

你应该将console.log放在函数的其他地方，以便更好地掌握执行顺序