1

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;

1 respuesta 1

1

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?

Suponiendo que el componente Grid provee el id(termino), entonces se puede pasar como props a Producto:

//pseudocodigo de grid
<Producto id={id}/>

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.

Luego en Producto, el patrón más común es usar el método componentDidMount para hacer la llamada API, dentro de este scope se puede hacer uso de id, pues llega desde Grid como props:

//pseudocodigo de class Product
class Product extends Component{
  constructor(props){
  super(props);
    this.state={
      productos:[]
    }
  }
  componentDidMount(){
      const url = `http://api-local.dev/api/products/${this.props.id}`;
      console.log(url);
  
      fetch(url)
          .then(response => response.json())
          .then(result => this.setState({ productos : result } ));
  }
  
  render() {
      return (
        <div className="app container" style={{backgroundColor: "whitesmoke", padding: "10px"}}>
            Producto
            {/*Iterar sobre el estado this.state.productos */}
        </div>);
      }
  }

Espero que esta respuesta sea de ayuda.

2
  • Gracias ahora lo he visto claro. 1000 gracias
    – ilernet
    Commented el 26 oct. 2021 a las 11:03
  • Claro, se puede pensar el los componentes React como funciones JS y las props como los parámetros que se pasan dicha función. Trata de revisar en cuanto puedas a React functional components. Saludos
    – g.4
    Commented el 26 oct. 2021 a las 16:11

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.