0

Tengo definida una ruta en < App > de esta forma

import ViewDiet from "./components/diets/view.component";


      <Switch>
        <Route exact path='/' component={Login} />
        <Route path="/diets" component={ViewDiet} />
      </Switch>

El código del componente ViewDiet tiene este código

import React, { Component } from "react";

export default class viewDiet extends Component {

    constructor(props) {
        super(props);
        this.state = {
            items : [],
            isLoaded: false,
        }
    }

    componentDidMount() {
        fetch('http://api-diets.local/api/diets/99999')
            .then(res => res.json())
            .then(json => {

                this.setState({

                    isLoaded:true,
                    items: json,
                })

            });

    }

    render() {

        var {isLoaded, items} = this.state;

        if (!isLoaded) {
            return <div>Loading...</div>;
        }
        else {

            var divStyle = {
                color: 'red',
            };

            return (

                <div style={divStyle}>

                    <p>Id : {items.id} </p>
                    <p>Name : {items.name} </p>
                    <p>Description : {items.description} </p>    
                </div>
            );
        }
    }
}

EL código funciona correctamente, lo que no consigo es donde hace el "fetch" para obtener los datos y es una ruta con un ID en la URL, no consigo recoger allí el parámetro.

La linia en questión es esta

fetch('http://api-diets.local/api/diets/99999')
1
  • Por lo que veo en el constructor inicias items como un arreglo, sin embargo en el render no lo iteras, sino que accedes directamente a items.id, items.name, etc... como si fuera un objeto. ¿que es lo que verdaderamente te retorna api/diets/99999, un arreglo o un objeto? ¿muestra algún error por consola? el 4 feb. 2020 a las 22:53

1 respuesta 1

1

No queda muy clara tu pregunta, no puede obtener un parametro desde el navegador? Si quieres obtener un id desde la url, tienes que especificar que esperas un parametro en el Route, asi:

<Route path="/diets:id" component={ViewDiet} />  // tuhostname.com/diets/9999

Y ya en tu componente ViewDiet puedes acceder a ese parametro de esta manera con la ayuda de destructuring:

  const { match: { params } } = this.props;
  console.log(params.id) // mostraria 9999

Como comenta @alter-lagos si tu endpoint regresa un arreglo de objectos la manera en que estas mostrando la informacion no es la correcta, tendrias que iterar cada item de tu arreglo con la ayuda de .map

render() {

        const {isLoaded, items} = this.state;
        const divStyle = {
            color: 'red',
        };

        if (!isLoaded) {
            return <div>Loading...</div>;
        }


            return (

                <div style={divStyle}>
                   {items.map(item => (
                     <p>Id : {item.id} </p>
                     <p>Name : {item.name} </p>
                     <p>Description : {item.description} </p> 
                   ))}
                </div>
            );
    }

Tambien como buena practica, es mejor ya no usar var y mejor usar let o const. Tambien el else esta demas ya que si entrar al primer if renderea el loader y no el listado de items.

2
  • Gracias por la respuesta, el concepto lo entendí. Solo tengo una duda esta linia "const { match: { params } } = this.props;" va dentro del constructor?
    – ilernet
    el 5 feb. 2020 a las 7:49
  • 1
    @ilernet puede ir en donde necesites tus parametros, ya sea en el constructor o dentro del metodo render o en algun otro metodo.
    – Isaac
    el 5 feb. 2020 a las 17:38

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.