0

Estoy realizando un get a un Json server

adjunto servidor json

http://my-json-server.typicode.com/jee4nc/myjsonserver/lista

EL problema esta cuando quiero asignarle esa lista de objetos a otro componente mediante props

import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"

class Axios_cards extends Component {

    constructor(props) {

        super(props)
        this.state = {
            courses : []
        }      
    }

    componentDidMount() {
        axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
        .then(response => this.setState({
                courses: response.data
            }))
    }
    render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/
    }
}

export default Axios_cards;

Exactamento lo asigno aqui

render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/>
    }

El componente que recibe la lista de objetos como props no recibe el array, ya que hice una validación para verificarlo

**Adjunto el componente al que asigno el array a través de props *

const CardsGrid = ({courses}) => (
    <div className="ed-grid m-grid-3">
            {
                Array.isArray(courses) ?
            courses.map( e => 
                <Cards 
                id={e.id} 
                title={e.title} 
                description={e.description}
                image={e.image}
                price={e.price}
                key={e.id}  
                />) : null
            }
        </div>
)

Al aplicar console.log(courses) , me sale "undefined", por lo que el array que pido con axios.get no se aplico como propiedad Estoy aprendiendo por mi cuenta javascript y reactjs por lo cual, el error pueda que sea muy obvio o algo muy pequeño :(

1
  • Hola @Jee4nc por lo que veo en el fetch de arriba no estas retornando la promesa de buena forma. then(resp=>resp. json()) para primero recibir el json, luego podrías volver a llamar al método then abajo: then(data=>{this.setState({courses: data})})
    – Richi
    Commented el 10 feb. 2020 a las 3:29

2 respuestas 2

0

Prueba utilizando la funcion componentdidmount

y le agregas un async para que el renderizado espere a que termine tu peticion ajax

componentDidMount = async() => {
    let items = await axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista');
    this.setState({
      items: items.data
    });
  }

Si con eso persiste el problema y te da algun tipo de error, en lugar de utilizar una funcion para el componente puedes utilizar una clase,

import React from 'react';

class Demo extends React.Component {
  render() {
    console.log('this.props.courses: ', this.props.courses);

    if(!this.props.courses || !this.props.courses.length) return '';

    return <div>
        ... tu contenido
    </div>
  }
}

export default Demo;
0

Los llamados a endpoints tienen demoras en las cuales intervienen varios factores como por ejemplo, velocidad de internet y velocidad de procesamiento que debe realizar el servidor que se encarga de retornar la información solicitada.

En tu caso tienes varias formas de solucionar este problema de datos undefined

1 - El uso de defaultProps

Puedes definir los valores por defecto de tus props al asignar la propiedad especial defaultProps de esta forma no tienes que validar que las propiedades sean undefined.

const CardsGrid = ({ courses }) => (
  <div className="ed-grid m-grid-3">
    {courses.map(e => (
      <Cards
        id={e.id}
        title={e.title}
        description={e.description}
        image={e.image}
        price={e.price}
        key={e.id}
      />
    ))}
  </div>
);

CardsGrid.defaultProps = {
  courses: [],
};

export default CardsGrid;

2 - Mostrar un loading cuando se están solicitando los datos.

class Axios_cards extends Component {
  constructor(props) {
    super(props);
    this.state = {
      courses: [],
      isFetching: true,
    };
  }

  componentDidMount() {
    axios
      .get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
      .then(response =>
        this.setState({
          courses: response.data,
          isFetching: false,
        }),
      )
      .catch(() =>
        this.setState({
          isFetching: false,
        }),
      );
  }

  render() {
    const { courses, isFetching } = this.state;
    return isFetching ? 'Loading...' : <CardsGrid courses={courses} />;
  }
}

export default Axios_cards;

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.