开发者问题收集

TypeError：设置 MetaMask 以显示 NFT 时无法读取未定义的属性（读取“map”）

2022-04-06
2284
javascript reactjs metamask

当我运行我的代码undured typeError：无法读取未定义的属性（读取'Map'）时，我一直在遇到此错误MetAmask帐户我将显示我的代码以显示我的所作所为，如果有人知道如何解决此问题，他们可以发布解决方案代码，因为这将有很大的帮助。

110990442 < hr/> 113124939

因此，当我放入nft.meta.name时，我会不断遇到未知的类型错误，并想知道为什么此错误会持续出现

303607035 < 303607035 < /代码>
2个回答

问题是你像这样定义你的 useState 

const [nfts, setNfts] = useState()

所以如果你没有为你的状态定义任何值，那么默认情况下它是 undefined 并且你不能通过 undefined 值进行映射，所以像这样定义你的状态 

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;

注意：当 API 从网络或链中获取数据时，也要进行错误处理并显示加载器

Abbas Hussain
2022-04-06

您在此处缺少初始值， 

const [nfts, setNfts] = useState([]);

使用 useState() 钩子时必须使用 default 值。如果您想对状态值应用 array.map() 方法，则必须使用空数组 useState([]) 声明钩子。

nurmdrafi
2022-04-06