score:0
you moved the call to setheadlinks
outside the function, and so the response
variable is not in scope. just need to move it back inside:
useeffect(() => {
const fetchdata = async () => {
const response = await client.getentry(id);
setheadlinks(response.fields.slug);
};
fetchdata();
}, []);
score:0
this is happening because response
is defined inside the block of the async
function. try defining response
outside the async
function scope to take advantage of closures.
useeffect(async () => {
let response;
const fetchdata = async () => {
response = await client.getentry(id);
};
await fetchdata();
setheadlinks(response.fields.slug);
}, []);
take special notice that to do this you need to use let
instead of const
. you also have a problem with the use of async/await
. see the corrected example and check the links below for more information about the topics mentioned.
https://developer.mozilla.org/en-us/docs/glossary/scope
https://developer.mozilla.org/es/docs/web/javascript/closures
https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements/async_function
this should fix your current error, but i don't know if it is enough for what you are trying to do.
Source: stackoverflow.com
Related Query
- How to retrieve nested JSON data with useEffect hook and async/await in React
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- how to use react fetch() with useEffect hook and map the fetched data
- REACT: How to create a reusable custom hook with functions and effects that can change & react to changes in a host component's data
- How to integrate axios api in react js with async and await using react hooks
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- How to do a custom logic and redirect to another pages in react or nextjs with useEffect hook
- react fetch data from multiple apis with async await and hooks
- How to define a state with JSON data (using react and axios)
- How to retrieve different type of data from JSON object array and play with it?
- Creating UseEffect react hook which should go through JSON data and switch the state
- How to display nested json data in React in key and value pair form?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How to test useEffect with async function and setState inside
- How to test a component with a nested container with React and Redux?
- React useEffect hook and Async/await own fetch data func?
- how can I test if useState hook has been called with jest and react testing library?
- How to fix React Redux and React Hook useEffect has a missing dependency: 'dispatch'
- How to use useEffect hook properly with array dependency. I passed state from redux store and still my component renders infinitely
- How to reset React hook state with setTimeout in useEffect
- How to check if state default boolean false is changing to true with React Hook useEffect
- react native how to filter data with some key object on json
- React error boundaries with useEffect and async function, what I'm missing?
- redux react strategy with async data and interaction
- How to retrieve the parameter after a hash (#) with React Router and useParams hook?
- React useEffect hook with long running task and merge state
- How to use setTimeout() along with React Hooks useEffect and setState?
- How to test React useEffect hooks with jasmine and enzyme
- How to fetch data on page load and then on button click with useEffect
- How to check the value of a nested React component in a unit test with Enzyme and Jest
More Query from same tag
- Keep query strings with AWS Amplify Hosting - React
- Submit a form to Rails backend with ReactJS
- How to push and deploy Reactjs app to gh-pages
- React conditionally show link if there is content on json file?
- Unable to render content with React-Konva
- Warning: Functions are not valid as a React child, using a conditional rendering
- Adding skeleton effect to a table with sorting/pagination
- How to prevent style tags of unused React components
- Showing the distinct values using key property
- Refs in mount/update component lifecycle
- Map() function returning as undefined when attempting to return query
- Make a React component rerender when data class property change
- How to manage state with complex json object in react js
- "How to make a functional Navbar"
- How socket.io can be used like axios?
- Cannot read property 'indexOf' of undefined in NextJS server
- ReactJs conditional rendering not working
- Sentry error - IndexSizeError: The index is not in the allowed range
- usestate not working for afterwards components
- Mutating the shopping cart using redux-saga
- Dynamically change state value according to `react` array key value
- Webpack & React getComponent() not loading component (async)
- Do I have to worry about useState causing a re-render?
- axios.get first time response is empty using useState and useEffect
- ReactJS: How to update a component from another
- Unit test React/Redux with Enzyme in 'create-react-app' application
- Unable to use react native Bluetoothel
- ReactJs: TypeError: Cannot read property 'ItemsServices' of undefined
- React onClick event trigger infinitely on render
- ReactDOM / getDOMNode() instead of jQuery?