score:3
the problem is that the data is not yet available when react renders the component. in practice, your code should guard against this, either at the component or above:
render() {
if(!this.state.items) return null; // or loading indicator, data has not returned yet
return (<div classname="container">
...
</div>);
}
score:0
i would put the itemapi.getallitems()
in component's constructor. once the items arrive, no matter when, the state will be updated and this will trigger render()
.
score:0
create method 'asyncupdate(data) { this.setstate(data) }' in constructor set 'this.asyncupdate = this.asyncupdate.bind(this)'
and after your promise call trigger 'this.asyncupdate(promiseddata)'
should help
score:0
from the docs: componentwillmount() is invoked immediately before mounting occurs. it is called before render(), therefore setting state synchronously in this method will not trigger a re-rendering. avoid introducing any side-effects or subscriptions in this method.
you should be able to make your request in componentdidmount(). this ensures a rerender when the state changes. if it's still empty, there's a chance that your map in your render is returning an empty array. make sure you are properly formatting the item that is returned from your api. there's a chance the response is of the form { items: [] }.
score:0
according to the react documentation calling apis is best done in componentdidmount().
that in combination with the answer from benjamin will give you the best implementation.
Source: stackoverflow.com
Related Query
- setState using promise
- I am using Redux. Should I manage controlled input state in the Redux store or use setState at the component level?
- How do I properly test for a rejected promise using Jest?
- Couldn't setState from the then function of the Promise
- Accessing object in returned promise using fetch w/ react js
- Using lodash debounce to return a promise
- What is the advantage of using componentDidUpdate over the setState callback?
- How to return a promise from an action using thunk and useDispatch (react-redux hooks)?
- Issue of using e.target.value in React setState function
- prevent rerender for every setstate using react usestate hook
- React does not rerender after setState used in promise
- Passing setState to child component using React hooks
- react setState array of object using map doesn't work?
- JS unit testing using enzyme: how to wait for setState within component's method to finish before proceeding with test case
- setState inside Promise in React
- How to spy on setState and test toHaveBeenCalled() using jest
- Reactjs - Setting State from props using setState in child component
- Using toFloat and setState on number input in React
- React updating progress from a compute intensive function using setState
- How to update an object in an array of Objects using setState
- setState with Firebase Promise in React
- React setState in promise causing infinite loop
- React setState with promise as a callback
- Is using setState in every iteration of a loop bad practice?
- How to resolve a promise after react hooks setState complete?
- Promise not returning when using mapDispatchToProps
- Using forceUpdate instead of setState in React?
- Infinite Loop when using setState for array
- Possible unhandled promise rejection, network error when using axios
- Cannot update particular property of object in react js using setState
More Query from same tag
- React Router Re-render when go back not using redux
- textarea not populating with default value but showing value on top of text area instead?
- Use comma to create a new tag on #react-select
- Reactjs - OnClick modal popup on its own
- Error: ENOENT: no such file or directory React Node.js
- How to update a MongoDB collection automatically every midnight?
- React api router can't show data in detail
- yarn eg:'live-server' is not recognized as an internal or external command
- Connect returns an object, but how do I get it to return a function?
- React dangerouslySetInnerHTML and script tag
- Vanilla CSS in React?
- Transferring form input value to var
- Forms in reactjs with flux
- Convert class-redux component to functional hooks component
- apollo-client used to make multiple requests to make a real-time search
- React page width optimization
- Redux-toolkit: Store does not have a valid reducer
- Ideas for code refactoring typescript switch statement
- firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.storage is not a function , firbase.storge() method not work also try firebaseApp.storage
- Pass a function of window.onload inside styled-components
- cookie displayed in node console with Postman, not with browser
- How to Add input fields in form when "Other" option is selected in dropdown in React.js
- Flowtype: Refining arrays
- How to use setState call back to update value prop of TextInput
- Submit formsdata into a table in ReactJS
- Reactjs function firing twice?
- How to retrieve Django model id from admin page via javascript
- converting class to hooks getting Property 'then' does not exist on type '(dispatch: any) => Promise<void>'.ts(2339)
- How to map the required data of array of object which i got from api call to usestate variable
- Adding components after the main root ReactJs (adding another block)