Así que estoy creando una función en reaccionar que me permite conectar mi página de reacción con mi metamáscara y mostrar mis nfts que compré en opensea en mi página web una vez que inicie sesión, pero me encuentro con un error de
No se pueden leer las propiedades de undefined (leyendo 'mapa') en NFTContainer
El error está ocurriendo en NftContainer, dice lectura indefinida del mapa, pero estoy seguro de que lo he definido. Si sabe dónde me equivoqué en esto, ayúdeme y suelte una solución a continuación. Esperaba ver los nombres de Nfts. Tengo en mi metamáscara para mostrar nada, pero ahora aparece el error.
import { cleanup } from '@testing-library/react'; import { NoEthereumProviderError } from '@web3-react/injected-connector'; 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 } 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 }) => { let nftToRender; return ( <div> {nftToRender = nfts.map((nft, index) => { return <NFTCard nft={nft} key={index} /> })} </div> ) } export default NFTContainer import React from 'react' const nftCard = ({ nft }) => { return ( <div> {nft.meta.name} </div> ) } export default nftCardPorque el valor no está undefined . Este es el único lugar donde usa .map() :
{nftToRender = nfts.map((nft, index) => { return <NFTCard nft={nft} key={index} /> })} Y esa variable nfts proviene de props:
const NFTContainer = ({ nfts }) => {Que se proporciona al componente:
<NFTContainer nfts={nfts} />Que se define en el estado:
const [nfts, setNfts] = useState() Y como nunca se le da un valor, no está undefined .
Puede definirlo con un valor predeterminado de una matriz vacía:
const [nfts, setNfts] = useState([]) Esto debería eliminar el error, permitiendo que .map() solo se llame en una matriz vacía y no itere silenciosamente sobre nada.
Por supuesto, probablemente también desee obtener datos reales en algún momento. En el mismo componente donde se mantiene ese estado, está realizando una llamada AJAX, pero nunca haga nada con este resultado:
const data = await response.json() ¿Son los data la nueva matriz que desea usar? En ese caso, lo configuraría en el estado:
setNfts(data);O si lo que desea es alguna propiedad sobre los datos:
setNfts(data.someProperty); De cualquier manera, para actualizar el estado al nuevo valor, deberá llamar a setNfts en algún momento.