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函数中记录数据，也可以在render函数中使用最新数据

Answer 2

来自docs：

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

第一次单击时，钩子更新被加入，并且在执行状态更新之前已到达console.log（'data：'，data），因此记录了空数据。

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

React Hooks-处理异步API调用

2 个答案: