Tengo dos datos de API que estoy usando. Estoy tratando de mapear los datos como elemento de lista. También estoy tratando de mapear el logotipo correcto para el artículo correcto usando productCode como punto de coincidencia. ¿Cómo puedo conseguir esto? He adjuntado mi código a continuación. Cada artículo debe tener el logotipo, la cantidad y el código del producto. Por favor, si también hay una mejor manera de fusionar las dos API, me encantaría aprender...
export default function App() { const [Alldata, setAlldata] = useState([]); useEffect(() => { // GET request using fetch inside useEffect React hook fetch("http://localhost:1337/api/rows/") .then((response) => response.json()) .then((json) => setAlldata(json)); // empty dependency array means this effect will only run once (like componentDidMount in classes) }, []); const token = "TOKEN HERE"; const [result, setResult] = useState([]); useEffect(() => { fetch( "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/", { method: "GET", headers: { Authorization: `Bearer ${token}` }, } ) .then((res) => res.json()) .then((json) => setResult(json)); }, []); const mainDATA = {result, Alldata}; console.log(mainDATA); return ( <div>App</div> ) }Por primera vez:
useEffect(() => { setProducts(result.result); });.. es probable que cause un bucle infinito, ya que se ejecutará en cada renderizado. Llamar a setProducts pondrá en cola un nuevo renderizado, que volverá a ejecutar useEffect, etc., que pondrá en cola un nuevo renderizado, etc.
Creo que puedes omitir este useEffect y simplemente usar:
useEffect(() => { fetch( "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/", { method: "GET", headers: { Authorization: `Bearer ${token}` }, } ) .then((res) => res.json()) .then((json) => setProducts(json?.result)); }, []); .. para escribir directamente al estado de los products .
Luego (asumiendo que los productos son una matriz y tiene un componente ProductItem que puede representarlo), escribiría algo como:
return ( <div> { products.map( product => <ProductItem key={product.id} product={product}/> ) } </div> )