score:2
the way you are using should throw the error, check the console
. you need to bind
the context to use this
keyword inside callback method that you are using in .then
, use this:
componentdidmount() {
axios.get('http://localhost:4000/api/v1/events')
.then( response => {
console.log('data', response.data);
this.setstate({events: response.data});
})
.catch(function (error) {
console.warn(error);
});
}
or use .bind(this)
to bind the context, like this:
componentdidmount() {
axios.get('http://localhost:4000/api/v1/events')
.then(function (response) {
this.setstate({events: response.data});
}.bind(this))
.catch(function (error) {
console.warn(error);
});
}
score:0
this
inside callback doesn't refer to your component context for that you need to bind your callback function of axios with your react component to update state of that component
import react, {proptypes, component} from 'react';
import axios from 'axios';
import './app.css';
class app extends component {
constructor(props) {
super(props);
this.state = {
events: []
};
}
componentdidmount() {
axios.get('http://localhost:4000/api/v1/events')
.then(function (response) {
this.setstate({events: response.data});
}.bind(this)) // binding of callback to component
.catch(function (error) {
console.warn(error);
});
}
render() {
// this.state.events keeps being an empty array []
return (
<div classname="home">
{
this.state.events.map((month) => {
console.log(month)
})
}
</div>
);
}
}
score:1
you need to bind axios success function to the correct context to make use of setstate. use this
componentdidmount() {
axios.get('http://localhost:4000/api/v1/events')
.then(function (response) {
this.setstate({events: response.data});
},bind(this))
.catch(function (error) {
console.warn(error);
});
}
Source: stackoverflow.com
Related Query
- State not updated after successful AJAX request
- react component state change after ajax call but does not rerender component
- React setState() not updating state after $.ajax() request
- React - How to Update State After AJAX Request
- getDerivedStateFromProps Does not re-render after Redux Reducer state is updated
- After Simulate('change') state is not updated
- Why my state is not getting updated even after writing the setState method?
- State is not updated after dispatching an action
- ReactJS state is being updated after an API request
- react-http-request does not change loading state after second request
- React - Ways to update state after ajax post request
- UI not updated after setting state
- why state is not updated after button click in setinterval react?
- React Hooks Wrapper not getting updated after state change in useEffect
- React frontend not receiving response from Django HttpResponse after successful request
- React JS: previousState in setState is not keeping the data of the previous state after the state is updated
- state not updating after AJAX call using setState()
- State is not being updated after calling API within useEffect
- React.useEffect: State not updating after axios request
- Why state is not updated after button click using hooks?
- Updated state is not passed as props to component after setState()
- React state is not updated after dispatch call using React useContext hook
- React - state not getting updated after a prop being sent from another component
- Not able to set the state in the ReactJS context API after AJAX call
- React component not refreshing when redux state has been updated with successful action
- Render not being called after state gets updated
- React useState() in an AJAX request not ever changing the component state
- State values resetting after onSubmit even if not successful
- ReactJS: state not updated after setState and callback
- Fill state property after ajax request
More Query from same tag
- How to draw a Pin on a canvas using ReactJS
- React change CSS with input
- How could I pass in props to display only certain columns in my table?
- Fluent UI React commandbar usestate not possible
- Update URL after opening modal, ReactJS
- Consuming a RESTful service in Reactjs
- React - saving state to local storage
- How to add a tab dynamically when we click a button using React js and Bootsrap 4
- Delete particular item in React Table?
- Vite + Storybook + SCSS: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
- Problems with ReactRouter 4 when using externals for React,ReactDOM and ReactRouter
- Unit Testing with Jest and React - Axios Get Inside useEffect
- React-icon used in an image tag src brings error
- Handle React re-rendering
- Is there a way to apply physics in framer motion?
- Receive JSON Object from ReactJS on my Django BackEnd
- Accepting an SVG as a prop to a React component
- How to pass object to hashHistory.push() in react
- How to fix this function to handle different error type of error catching
- Got Received number of calls: 0 error for login functionality
- ReactJS change background color every X second in functional component
- usage of purgecss safelist option gives UnhandledPromiseRejectionWarning
- Form submission canceled because the form is not connected in react js. Where am I going wrong?
- How to render the landing page in server and the rest in client side?
- Why I'm not able to clear my setInterval?
- Simple countdown - onClick button fires on render
- TypeError: Cannot read property 'list' of undefined of balanceTransactions
- React imported function returns undefined
- React equivilant of `$(window).scrollTop()`
- render page using react