Estoy haciendo una aplicación React básica con datos provenientes de mi API. Pero el estado no se actualiza cuando hago this.setState({}) después del éxito de AJAX. El state.events está vacío en el método de render .
¿Qué estoy haciendo mal?
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}); }) .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> ); } } export default App;La forma que está utilizando debería arrojar el error, verifique la console . Debe bind el contexto para usar this palabra clave dentro del método de devolución de llamada que está usando en .then , use esto:
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); }); } o use .bind(this) para vincular el contexto, así:
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); }); }Debe vincular la función de éxito de axios al contexto correcto para hacer uso de setState. Utilizar este
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); }); }thisla devolución de llamada interna no se refiere al contexto de su componente, por lo que necesita vincular su función de devolución de llamada de axios con su componente de reacción para actualizar el estado de ese componente
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> ); }}