Skip to main content
2 de 2
Título de pregunta
g.4
  • 3.5k
  • 2
  • 11
  • 22

React fetch de una URL y pintar los datos

Tengo un grid que muestra "N" productos y al hacer click en uno de ellos la idea es recibir una url del tipo http://localhost:3000/product/13-producto-de-pruebas

Donde "13" será el ID del producto y "producto de pruebas" formará parte de la URL.

La idea es este código de producto 13 recogerlo desde un componente en REACT y lanzar una consulta a la API de productos para devolver las propiedades del objeto y printarlas por pantalla.

Los problemas que me encuentro sin saber como resolver són : a) donde actualmente tengo la constante termino = 13 , como recoger dicho valor de la URL? o debo pasarlo del componente anterior "grid" a este y recogerlo? b) en el render del componente hago la llamada a la API, pues dicha API veo que se ejecuta infinita veces, solo quiero que lo haga una vez renderizado el componente.

import React, {Component} from "react";

class Product extends Component{

state = {
    termino : '',
}


consultarApi = () => {
    const termino = 13;
    const url = `http://api-local.dev/api/products/${termino}`;
    console.log(url);

    fetch(url)
        .then(response => response.json())
        .then(result => this.setState({ productos : result } ));
}

datosBusqueda = (termino) => {
    this.setState({
        termino
    }, () => {
        this.consultarApi();
    })
}


render() {

    this.consultarApi();

    return (


            <div className="app container" style={{backgroundColor: "whitesmoke", padding: "10px"}}>

                Producto <br/><br/><br/><br/>

            </div>

    );
    }
}

export default Product;
ilernet
  • 1.3k
  • 1
  • 28
  • 63