1

Estoy tratando de crear un componente con react luego de hacer una consulta post con axios, el tema es que al parecer renderiza el elemento antes de hacer el setState a la variable o antes de realizar incluso el axios. Dejo acá el codigo:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import BtnAdd from './AddButton'; 
import axios from 'axios';

 class Admin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            productos:null
        };
    }
    async  getProductos(){
      await axios({
            method: 'POST',
            url: '/productos'
            }).then(response => {
            console.log(response);
            var data = response.data;
                this.setState({ productos:data});
            });
    }
    render() {
            this.getProductos();
            const productos = this.state;
        
            return ( productos.map((data, index) => {
                    <tr key={data.id}>
                    <td>{data.nombres}</td>
                    <td>{data.precio}</td>
                    <td>{data.descripcion}</td>
                    <td>{data.imagen}</td>
                    <td>{data.stock}</td>
                    <td>{data.isActive}</td>
                    </tr>
                     }))
               
    }
}
if (document.getElementById('adminTable')){
    ReactDOM.render(<Admin/>, document.getElementById('adminTable'));
}

El error que recibo es el siguiente de igual forma: The above error occurred in the component: in Admin

Consider adding an error boundary to your tree to customize error handling behavior.

1
  • y si pruebas encapsulando tu función getProductos dentro de un componentDidMount si necesitas que haga la llamada apenas se monte el componente el 24 feb. 2021 a las 23:30

2 respuestas 2

0

Debes basarte en el ciclo de vida de un componente fuente: https://es.reactjs.org/docs/state-and-lifecycle.html

mira en tu codigo deberia ser algo parecido a esto:

class Admin extends React.Component {
  constructor(props) {
   
  }

  componentDidMount() {
      getProductos() // aqui podrias hacer la llamada con axios
  }

  componentWillUnmount() {
  }

  render() {
            return ( productos.map((data, index) => {
                    <tr key={data.id}>
                   ...

    );
  }
}
0

Recuerda que estás haciendo una petición de forma asíncrona, y no la estás mandando a llamar, entonces lo primero es llamar a la función getProductos después de renderizarce, con la función componentDidMount lo segundo es que en el return debes preguntar primero si el this.state.productos !== null para hacer el map una vez existan productos en el estado, de lo contrario estas creando un map en un objeto null, te dejo un ejemplo Aqui espero te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.