'React Api fetch with parameterized name
I'm struggling with the fetch because i want to get the info from a parameterized url. In the backend i had create a function where for any instruments in the url, it brings from database all the matched instruments:
// http://localhost:5000/guitarra
{
"titulo": {
"id": 1,
"nombre": "Guitarra"
},
"instrumentos": [
{
"id": 19,
"nombre": "SG Special",
"fabricante": "Epiphone",
"precio": 104999,
"descuento": 0,
"precioDescuento": 0,
"texto": "SG Special regresa al diseño clásico que lo hizo relevante, tocado y amado, dando forma al sonido a través de generaciones y géneros musicales. Este SG Special de principios de los 60 tiene la vibración y el sonido que se escuchan en innumerables grabaciones de rock clásico.",
"fecha": "2015-06-15",
"categoria_id": 1,
"imagenes": [
{
"id": 4,
"url_imagen": "/SG-Special/images-1643573154488.webp",
"instrumento_id": 19
},
{
"id": 5,
"url_imagen": "/SG-Special/images-1643573154489.webp",
"instrumento_id": 19
},
{
"id": 6,
"url_imagen": "/SG-Special/images-1643573154490.webp",
"instrumento_id": 19
}
]
},
{
"id": 24,
"nombre": "Gretsch-251-Double-Neck",
"fabricante": "Gretsch",
"precio": 318500,
"descuento": 0,
"precioDescuento": 0,
"texto": "La Gretsch® G5566 Jet ™ Double Neck combina una guitarra estándar y una guitarra de barítono en un solo instrumento de cuerpo sólido de corte único. Las características incluyen tope superior, cuellos de arce con diapasón de palisandro (24,75\" longitud de escala de guitarra, 29.75\" escala de barítono), pastillas dobles de doble humbucking (barítono) y pastillas humbucking dobles cubiertas de cromo (guitarra), interruptor de tres posiciones para cada instrumento, conmutación de selección de cuello de dos posiciones, puentes Adjusto-Matic ™ duales, acabado Bright Sparkle, y puentes de vibrato con licencia Bigsby® B60 (barítono) y B50 (guitarra).",
"fecha": "2016-06-05",
"categoria_id": 1,
"imagenes": [
{
"id": 19,
"url_imagen": "/Gretsch-251-Double-Neck/images-1643589725085.webp",
"instrumento_id": 24
},
{
"id": 20,
"url_imagen": "/Gretsch-251-Double-Neck/images-1643589725086.webp",
"instrumento_id": 24
},
{
"id": 21,
"url_imagen": "/Gretsch-251-Double-Neck/images-1643589725088.webp",
"instrumento_id": 24
}
]
}
]
}
So my question its, how can i fetch an specify url? i was trying it with useParams but how its a class and not a function React wont let me
import React, {Component} from 'react';
import Instrumento from "./instrumento"
import "./instrumentos.css"
import {useParams} from "react-router-dom"
class Categorias extends Component {
constructor(props){
super(props);
this.state = {
instrumentos: [],
categorias: []
}
};
async componentDidMount(){
try{
const { categoria } = useParams();
let instrumentos = await fetch(`http://localhost:5000/${categoria}` ).then(response => response.json())
this.setState({
titulo: instrumentos.instrumentos,
instrumentos: instrumentos.instrumentos
});
console.log(instrumentos)
}
catch(error){
console.log(error);
}
}
render(){
return(
<article className="instrumentos-article">
{this.state.instrumentos === [] && <p>Cargando...</p>}{
this.state.instrumentos.map((instrumentos, i) => {
return <Instrumento
key={instrumentos + i}
id={instrumentos.id}
imagenes={instrumentos.imagenes[0].url_imagen}
nombre={instrumentos.nombre}
categoria ={instrumentos.categoria}
fabricante={instrumentos.fabricante}
fecha={instrumentos.fecha}
precio={instrumentos.precio}
/>
})
}
</article>
)
}
}
export default Categorias;
Any idea? Thanks from now :)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
