I am trying to make a request using useFetch from react-fetch-hook npm package when a button is pressed. Here is my code
import React, { useState } from 'react';
import useFetch from 'react-fetch-hook';
import { Button } from 'react-bootstrap';
const Component = () => {
const [message, setMessage] = useState(false);
const handleOnClick = () => {
const { isLoading, data } = useFetch(
'https://raw.githubusercontent.com/markmclaren2/sample_json/main/user.json'
);
if (isLoading) {
setMessage('Loading...');
} else {
setMessage(`Received id: ${data.id}`);
}
};
return (
<div>
<Button onClick={handleOnClick}>Load Data</Button>
<div>{message}</div>
</div>
);
};
export default Component;
I encountered this error
React Hook "useFetch" is called in function "handleOnClick" that is neither a React function component nor a custom React Hook function.
What is the correct way to call useFetch when the user presses the button and show the "Loading..." and then the result messages?
CodePudding user response:
Hello maybe do something like this:
import React, { useState } from "react";
import useFetch from "react-fetch-hook";
import { Button } from "react-bootstrap";
export default function App() {
const [message, setMessage] = useState("");
const [isClicked, setIsClicked] = useState(false);
const {
isLoading,
data
} = useFetch(
"https://raw.githubusercontent.com/markmclaren2/sample_json/main/user.json",
{ depends: [isClicked], formatter: (response) => response.text() }
);
const handleOnClick = () => {
setIsClicked(true);
if (isLoading) {
setMessage("Loading...");
} else {
setMessage(data as string);
}
};
return (
<div>
<Button onClick={handleOnClick}>Load Data</Button>
<div>{message}</div>
</div>
);
}
I also prepared a codesandbox here so you can check it out
CodePudding user response:
useFetch is a hooks that wrap global fetch() method. It is considered as a custom React Hook
by react
because of its name
Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook.
So, the placement has to follow react custom hooks rules whether in a React function component or in a custom React Hook function.
As the document says that we can use depends
options to trigger the fetch.
The request will not be called until all elements of depends array be truthy.
So, we can implement this by using isClicked
state as the fetch trigger where the isClicked
state will be reset by useEffect
hooks. So, on every click event, the useFetch
will make a new request to the server'
import React, { useEffect, useState } from 'react';
import useFetch from 'react-fetch-hook';
const Component = () => {
const [isClicked, setIsClicked] = useState(false);
const [message, setMessage] = useState('');
// place the useFetch hooks here as the rules says
const { isLoading, data } = useFetch(
'https://raw.githubusercontent.com/markmclaren2/sample_json/main/user.json',
{ depends: [isClicked] }
);
useEffect(() => {
isClicked && setIsClicked(false);
},[isClicked]);
useEffect(() => {
if (isLoading) {
setMessage('Loading ...');
}
if (data && !isLoading) {
setMessage(`Received id: ${data.id}`)
}
},[data, isLoading])
return (
<div>
<button onClick={() => setIsClicked(true)}>Load Data</button>
<div>{message}</div>
</div>
);
}