Estoy tratando de mostrar Nfts en mi página, pero da un error como Uncaught TypeError: No se pueden leer las propiedades de undefined (leyendo 'mapa'). Entonces, mi variable nfts es una matriz, pero aún no es posible el mapeo. Aquí está mi componente:
import React, { useState, useEffect } from "react"; import { Container, Row, Col } from 'react-bootstrap'; import axios from 'axios'; import { Link } from "react-router-dom"; const Nfts = ({ walletAddress }) => { const sender = "abc"; const apikey = "def"; const [nfts, setNfts] = useState(); const getNftData = () => { axios.get(``) .then(output => { setNfts(output.data.result) }) } useEffect(() => { getNftData(); }, []); return ( <section className="my-nfts"> <Container> <Row> {nfts == '' ? <><div className='mynft-title'>My NFTs</div> <div className="empty-nft">There is no NFT to display</div></> : ( <> {nfts.map((nft, index) => { if (nft.from == sender && nft.to == walletAddress) { <Col xs={12} md={12} lg={4}> <div key={index}>{nft}</div> </Col> } })} </> )} </Row> </Container> </section> ); } export default Nfts;Así que creo que no se procesa la primera vez que se carga la página. Pero podría estar equivocado. ¿Qué crees que estoy haciendo mal? Gracias..
Solo dale a nfts State una matriz vacía como valor inicial Por ejemplo
const [nfts, setNfts] = useState([]);o
En el HTML, use una declaración condicional para no usar el método de mapa si el nfts aún no está definido. Por ejemplo
nfts && nfts.map(() => { ... } )Además, noté que la URL de la API está vacía. (No estoy seguro si quiere decir eso porque no quiere mostrar la URL de la API en la pregunta o se lo está perdiendo).
Te sugiero una sintaxis mucho más limpia
nfts?.map((item) => { ...item } )