Sigo recibiendo este error cuando ejecuto mi código Uncaught TypeError: No puedo leer las propiedades de undefined (leyendo 'mapa') Estoy tratando de configurar una Metamask que muestre los NFTS de los usuarios que compraron en OpenSea cuando conectan su cuenta de metamask I Mostraré mi código para mostrar lo que he hecho y, si alguien sabe cómo solucionarlo, podría publicar un código de solución, ya que sería de gran ayuda.
import { useEffect, useState } from 'react'; import './nft.css' import NFTContainer from './NFTContainer' export function Nft() { const [walletAddress, setWalletAddress] = useState(null) const [nfts, setNfts] = useState() const connectWallet = async () => { if (typeof window.ethereum !== 'undefined') { const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); setWalletAddress(accounts[0]) } } const getNftData = async () => { if (!walletAddress) return; const response = await fetch(`https://api.rarible.org/v0.1/items/byOwner/?owner=ETHEREUM:${walletAddress}`) const data = await response.json() debugger setNfts(data.items) } useEffect(() => { getNftData() }, [walletAddress]) return ( <div className='Nft'> <div className='text'> Account: {walletAddress} </div> <button className='connect-button' onClick={connectWallet}> Connect Wallet </button> <NFTContainer nfts={nfts} /> </div> ); } export default Nft; import React from 'react' import NFTCard from './NFTCard' const NFTContainer = ({ nfts }) => { return ( <div> {nfts.map((nft, index) => { return <NFTCard nft={nft} key={index} /> })} </div> ) } export default NFTContainerEntonces, cuando coloco nft.meta.name, sigo recibiendo el error de tipo no detectado y me pregunto por qué sigue apareciendo este error.
import React from 'react' const NFTCard = ({ nft }) => { return ( <div> {nft.meta.name} </div> ) } export default NFTCardTe falta el valor inicial aquí,
const [nfts, setNfts] = useState([]); Debe usar el valor default mientras usa el gancho useState() . Si desea aplicar el método array.map() en el valor del estado, debe declarar el gancho con la matriz vacía useState([]) .
el problema es que useState tu estado de uso así
const [nfts, setNfts] = useState() Entonces, si no define ningún valor para su estado, por defecto no está undefined y no puede mapear a través de un valor undefined , así que defina su estado de esta manera
import { useEffect, useState } from 'react'; import './nft.css'; import NFTContainer from './NFTContainer'; export function Nft() { const [walletAddress, setWalletAddress] = useState(null); const [nfts, setNfts] = useState([]); const connectWallet = async () => { try { if (typeof window.ethereum !== 'undefined') { const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); setWalletAddress(accounts[0]); } } catch (error) { console.log('err1==>', error); } }; const getNftData = async () => { try { if (!walletAddress) return; const response = await fetch(`https://api.rarible.org/v0.1/items/byOwner/?owner=ETHEREUM:${walletAddress}`); const data = await response.json(); setNfts(data.items); } catch (error) { console.log('err2==>', error); } }; useEffect(() => { getNftData(); }, [walletAddress]); return ( <div className='Nft'> <div className='text'>Account: {walletAddress}</div> <button className='connect-button' onClick={connectWallet}> {!walletAddress ? 'Connect Wallet' : 'Wallet Connected'} </button> <NFTContainer nfts={nfts} /> </div> ); } export default Nft;Nota: también realice el manejo de errores y muestre el cargador cuando la API está obteniendo datos de la red o de la cadena