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;