score:1
you need to use the callback, as you can't have direct return value when working asynchronously.
in getdata()
method, change this line:
this.callback();
to this:
this.callback(req.responsetext);
then put the console.log in the callback function:
renderpost(responsetext) {
console.log(responsetext);
}
score:0
the xmlhttprequest
api uses same named constructor to make asynchronous calls as per mdn: https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest#xmlhttprequest.
in your scenario, you are using this api, but the api cannot return any data directly to caller as getdata()
returns nothing to its caller, being an asynchronous method.
since, you have a callback()
, use it to pass the result of the asynchronous call back to its caller using
this.callback(req.responsetext);
so once the method completes, the callback will be passed the responsetext
as argument. in order to handle that change the method signature for the callback to accept this argument as:
renderpost (responsetext) {
// use the response now
console.log(responsetext);
}
Source: stackoverflow.com
Related Query
- Additional class for loading async requests
- how do I declare additional property for React class component?
- React, async loading for multiple sections/views with different components
- Using useEffect (or the equivalent) for class component (making a loading screen)
- HTML5 video flashes and makes additional requests for the same video
- Why do we need middleware for async flow in Redux?
- React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
- Attach Authorization header for all axios requests
- React-Redux: Actions must be plain objects. Use custom middleware for async actions
- Set loading state before and after an action in a React class component
- React-router not loading css for nested pages on refresh
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- Preventing UI flicker when loading async data in React.js
- Why async requests should be made in componentDidMount instead of getInitialState in ReactJS?
- React-Router: how to wait for an async action before route transition
- Where to store Class instance for reusability in Redux?
- Unit test: Actions must be plain objects. Use custom middleware for async actions
- "Missing return type on function" for every React class method
- React Virtualized - onclick, expand Rows for additional details
- What is cause for this issue "Cannot convert argument of type class org.json.JSONArray" in react-native android?
- React-Select Async loadOptions is not loading options properly
- Additional loader for pdfjs-dist in react app?
- Typescript generic class equivalent for React.memo
- useEffect alternate for Class Component
- How should I implement lazy loading for my images in react?
- Fetch API for Django POST requests
- Reflux how to listen for async action completed
- Best practices for React, Redux and Websocket (Keeping one class to handle requests)
- Does a redux saga for API requests make sense?
- Vue js for non SPA apps - loading components in with out the app component
More Query from same tag
- react script not working when sourced through external file
- javascript react setting a state from a value from a map
- workbox webpack 4 plugin unable to precache non-webpack assets
- How to store datetime in azure cosmosdb from asp.net webapi
- React JS: previousState in setState is not keeping the data of the previous state after the state is updated
- Memory leak in React component whenever a delete function is run....not using useEffect?
- How can i use NextJS routes with a form in React
- React increment and decrement array counters in state
- gsap, react - Cannot tween a null target
- Auth Protected Routes React Router V4 - Passing Props
- React > How to set focus on the input field after adding a new row by using react-table
- posts are not in order. want to show latest post at top first
- React, Error Display Leaflet (Map) Foreach Modal
- With redux form how can I normalize and allow only positive integers on an input type number?
- React Router difference between component with and without function
- Parameter value sent to but not received by action
- Invariant Violation: Hooks can only be called inside the body of a function component
- Why need to pass a callback accepting the previous state?
- Pass data from input field
- Get response via axios api and display it as DOM element on frontend
- How to wait execution of a saga to finish in redux-saga?
- Using props as the key property in React inline style
- How to sign user in after registration using AWS Amplify and React
- Unexpected token error in React app
- Rendering components dynamically using React
- How to use props in a function in class component?
- Error Boundaries disables routing inside of a Switch
- How to have 2 select inputs with exclusive elements?
- Reorder an array of values in an object in Javascript
- Cors blocking requests from my Single Page Application