score:1
- you cannot
await
on asetstate
(seturl
) function. - you return in your fetch data which is not used later.
you need to first change your mindset on how you think in react hooks and when you need to use them.
as far as i understand you want to fetch some data from server, update the store on successful retrieval, and show an error when the request fails.
you should do this all the way or don't do this at all. you can put the dispatch in the hook or you can forget about the hook and write a reusable fetchdata
function and handle sethaserror
in your component's useeffect
.
there are many ways to solve this but this is my preferred solution:
import react, { fragment, usestate, useeffect, usereducer } from 'react';
import axios from 'axios';
export const usehttprequest = (url, updatestore) => {
const [haserror, sethaserror] = usestate(false);
const fetchdata = async (url) => {
sethaserror(false);
try {
const res = await axios(url);
const responsedata = res.data.data.data;
updatestore(responsedata);
} catch (error) {
sethaserror(true);
}
};
useeffect(() => {
if (url) {
fetchdata(url);
}
}, [url]);
return { fetchdata, haserror };
};
// in case you want to fetch the data on component render
const { fetchdata, haserror } = usehttprequest(url, (data) => dispatch({
type: set_categorydata,
payload: data
}));
// in case you want to fetch it in a callback
const clickbutton = () => {
fetchdata(somecustomurl);
}
finally, you can generalize your dispatchers so you don't need to send the whole function to the hook and only send the dispatcher name.
Source: stackoverflow.com
Related Query
- Not able to use value returned by React hook
- Which strategy to use when displaying a value on the screen that comes from a useState hook of React and not re render unless under an action?
- React Hook not able to use new state in the same function
- React Hook useCallback not updating State value
- React Hook - Use effect on component unmount only, not when dependency updates
- Why react hook value is not updated in async function?
- React Custom Hook set function returned is not a function
- not able to clear Interval using variable which is outside the react hook
- I am not able to store the returned value of a javaScript function (of Geocoding) in a variable
- I am trying to use the react hook useContext() but its not working
- How to let react consider returned value of custom hook as stable identity?
- React set value to select not working but use selected in option is fine
- Not able to change the value of an element using react
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- The state variable returned after using useState react hook shows .map is not a function
- use react hook value in formik onSubmit
- Why is jest not able to provide the useTranslation hook to a custom React hook I'm testing?
- React Navigation "focus" event listener does not use updated value
- return value is not rendering when returned from inside the handleclick() function in react
- React Hooks: state variable having wrong value in event handlers, not able to type in input
- Why am I not able to use const/let in React Component?
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- Not able to build react native project getting server returned response error 500 in react native?
- Not able to use NPM package in React
- React UseEffect Hook - value updates within hook but not within body of component
- When setting state with React's use state hook using it's prev (or initial) value throws an error Type Error 0 is not a function
- React Hook Form useWatch not displaying correct value in component
- React Hook set value not working inside EventSource.onmessage
- Not able to set defaultChecked value in Radio button react js
- React Express - Not able to pass the value of custID to the insert sql statement
More Query from same tag
- Refactoring a ReactJS class to a Hook issue
- react redux keep same order when update
- Unable to start call using default phone or skype
- Button Component Requires Two Clicks
- Add items to list in ReactJS
- React - how to update a specific field in Object Array using useState in UseEffect
- How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?
- React HandleDelete TypeError undefined
- Proxying requests from client react app to server with create-react-app and webpack dev server
- Close modal A after opening modal B from modal A in reactjs with react-bootstrap
- Add a child `div` component on button click (ReactJS)
- Vite and React: stop using "react-refresh"
- How to live edit a class/functional component on Storybook
- TS2604: JSX elemy type '' does not have any construct or call signatures
- React Jest testing : TestingLibraryElementError: Unable to find an element
- How to add a <br> tag in reactjs between two strings?
- Unit test - Link in React using Jest & Enzyme
- REACT: How to set the state in the child and access it in the parent, receiving undefined
- Adding to an array in react if there is not a match
- Display state.joke when toggle button is only ON
- React/Redux component does not re-render
- Can't access Javascript object within React Component
- Get class instance of ReactElement
- How to disappear alert after 5 seconds in React JS?
- Sending a React.FunctionComponent<React.SVGProps<SVGSVGElement>> as a prop to another component
- get html element in react tests using enzyme
- When to use onclick ={ myfuntion()} vs onclick={() => (myfunction())}
- Barchart design in react native chat kit
- Navigate using react-router-dom v6 after performing user action
- Use global parent selector with Sass and CSS Module