Tengo un objeto anidado que es un poco complicado ya que tiene un valor numérico como ID de cada entrada.
"coins": 0:{...}29 items 1:{...}29 items 2:{...}29 items 3:{...}29 items 4:{...}29 itemsEste es mi código, esto no funciona para mí. El registro de la consola devuelve datos, pero el componente de la interfaz de usuario no se representa
import React, { useState, useEffect } from "react"; import "./Homepage.css"; import CryptoCard from "../Card/Card"; import axios from "axios"; const Homepage = () => { const [coinData, setCoinData] = useState([], () => { const localData = localStorage.getItem("coinData"); return localData ? JSON.parse(localData) : []; }); useEffect(() => { const options = { method: "GET", url: "https://coinranking1.p.rapidapi.com/coins", headers: { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": "API_KEY", }, }; axios .request(options) .then((response) => { setCoinData(response.data.data.coins); // persist in localStorage localStorage.setItem( "coinData", JSON.stringify(response.data.data.coins) ); }) .catch((error) => { console.error(error); }); }, []); console.log("Coins names"); coinData.forEach(function (coin) { console.log(coin.name); }); const i = 0; return ( <div className="homepage"> <div className="heading"> <h1>Discover</h1> <hr className="line" /> </div> <div className="cards-container"> {coinData?.forEach(function (coin) { <CryptoCard name={coin.name} coinUrl={coin.websiteUrl} duration="4 minutes ago" symbol={coin.symbol} rank={coin.rank} exchanges={coin.numberOfExchanges} price={coin.price} />; })} {/* <CryptoCard name={coinData[0]?.name} coinUrl={coinData[0]?.websiteUrl} duration="4 minutes ago" symbol={coinData[0]?.symbol} rank={coinData[0]?.rank} exchanges={coinData[0]?.numberOfExchanges} price={coinData[0]?.price} /> */} </div> </div> ); }; export default Homepage;Necesito iterar sobre esto y devolver los datos de cada entrada a mi componente React y no puedo encontrar la manera de iterar sobre ellos sin un bucle. Usar bucle tampoco funciona para mí.
En reaccionar no tienes que usar forEach. En su lugar, debe usar .map , que es fácil, declarativo y no muta la matriz original. Con forEach , si altera algún miembro del valor de la moneda dentro del ciclo, o incluso en el componente CryptoCard , está mutando la matriz original, lo que significa que muta el estado de reacción, eso no está permitido. Pero para que esto funcione, asegúrese de registrar en la consola la variable coinData y verifique si contiene el valor que espera.
{coinData?.forEach(function (coin) { <CryptoCard name={coin.name} coinUrl={coin.websiteUrl} duration="4 minutes ago" symbol={coin.symbol} rank={coin.rank} exchanges={coin.numberOfExchanges} price={coin.price} />; })}debiera ser
{(coinData|| []).map(coin => ( <CryptoCard name={coin.name} coinUrl={coin.websiteUrl} duration="4 minutes ago" symbol={coin.symbol} rank={coin.rank} exchanges={coin.numberOfExchanges} price={coin.price} />; ))}Puedes hacer lo siguiente:
{coinData?.map((coin) => <CryptoCard name={coin.name} coinUrl={coin.websiteUrl} duration="4 minutes ago" symbol={coin.symbol} rank={coin.rank} exchanges={coin.numberOfExchanges} price={coin.price} />; )} .map devolverá una lista de su componente CryptoCard .
Si las declaraciones de console.log están imprimiendo los valores previstos correctamente y el siguiente fragmento no funciona,
<div className="cards-container"> {coinData?.forEach(function (coin) { <CryptoCard name={coin.name} coinUrl={coin.websiteUrl} duration="4 minutes ago" symbol={coin.symbol} rank={coin.rank} exchanges={coin.numberOfExchanges} price={coin.price} />; })} </div> Puede ser porque no está devolviendo nada desde dentro de la función dentro del ciclo forEach . Intente agregar return antes del componente dentro de la función, así
{coinData?.forEach(function (coin) { return ( <CryptoCard name={coin.name} coinUrl={coin.websiteUrl} duration="4 minutes ago" symbol={coin.symbol} rank={coin.rank} exchanges={coin.numberOfExchanges} price={coin.price} />; ) })}