React 自定义钩子不会从第一次点击更新

Question

I've created a custom hook to fetch data with events handlers, when I using it on click event the hook makes the request on the second click

useFetch.js

import { useState, useEffect } from 'react';
import { makeRequest } from '../utils';

const useFetch = (query = {}) => {
  const [request, setRequest] = useState({ ...query });

  const [data, setData] = useState({
    response: null,
    isError: null,
    isLoading: request.isLoading,
  });

  const fetchData = async () => {
    if (!request.url) {
      return;
    }
    try {
      const res = await makeRequest(
        request.url,
        request.method || 'get',
        request.body || null,
      );
      setData({
        response: res,
        isLoading: false,
        error: null,
      });
    } catch (error) {
      setData({
        response: null,
        error,
        isLoading: false,
      });
    }
  };
  const onEvent = (req) => {
    if (req) {
      setRequest({ ...req });
    }
  };

  useEffect(() => fetchData(), [request]);

  return { ...data, onEvent };
};

export default useFetch;

Component File

const { isLoading, isError, response, onEvent } = useFetch();

  const ClickMe = () => {
    onEvent({
      url: 'v1/profile/login',
      method: 'post',
      body: {
        username: 'eee@ddd.com',
        password: '2342332',
      },
    });
    console.log('response', response);
  };
return (
    <>
      <button onClick={() => ClickMe()} type="button">
       
        Click Me
      </button>
    )

the log inside the ClickMe function is null in the first click but in the second click it returns the value

Answer 1

Because fetchData is asynchronous function you cannot know when resposne will be set, that's why you cannot access it like normal sync code

in your app code you could observe response change to console it like

useEffect(() => { console.log(response) }, [ response ]);

Answer 2

At the time of console.log, the response is not fetched. Since when ever response changes, the component re-renders, you can try like below to see the updated values of isLoading and response .

return (
  <>
    {isLoading && <div> Loading... </div>}
    {`Resonse is ${JSON.stringify(response)}`}
    <button onClick={() => ClickMe()} type="button">
      Click Me
    </button>
  </>
);

Answer 3

As the others said, it's an asynchronous operation. If you want to use the response as soon as you called onEvent, you can do something along these lines using a promise:

import { useState, useEffect } from 'react';
import { makeRequest } from '../utils';

const useFetch = (query = {}) => {
  useEffect(() => {
    if (query) {
      fetchData(query)
    }
  }, []) // if query is provided, run query

  const [data, setData] = useState({
    response: null,
    isError: null,
    isLoading: true
  });
  
  const fetchData = async (query) => {
    return new Promise((resolve, reject) => {
      if (!query.url) {
        reject('url needed')
      }
      makeRequest(query).then(res => {
        setData({
          response: res,
          isLoading: false,
          error: null
        })
        resolve(res)
      ).catch(error => {
          setData({
            response: null,
            error,
            isLoading: false
          });
          reject(error)
        });
      })
    })
  };

  // provide fetchData directly for lazy calls
  return { ...data, fetchData };
};

export default useFetch;

And then call it like so:

const { response, fetchData } = useFetch()

fetchData({
      url: 'v1/profile/login',
      method: 'post',
      body: {
        username: 'eee@ddd.com',
        password: '2342332',
      },
    }).then(res => ...);