Token.networks.networkId] 在 web3 中返回 undefined

Question

I'm having trouble understanding a part of the code:

const networkId = await web3.eth.net.getId() // this line returns the id 
const PeePTokenData =  PeeP_Token.networks[networkId] // and this one? 

this returns undefined, and I don't know exactly how to find the solution. Paste complite code below

 import React, { useState } from 'react'
import Web3 from 'web3';
import PeeP_Token from './build/PeeP_Token.json';
import Dummy_Token from './build/Dummy_Token.json';
import StakingDapp from './build/StakingDapp.json';


function App() {

  const [isConnected, setIsConnected] = useState(false)
  const [account, setAccount] = useState()
  const [ethBalance, setEthBalance] = useState("")

  const detectCurrentProvider = () => {
    let provider;

    if (window.ethereum) {
      provider = window.ethereum
    } else if (window.web3) {
      provider = window.web3.currentProvider
    } else {
      window.alert(' Non-Ethereum browser detected, Ypu should consider trying Metamask')
    }
    return provider;
  };

  const onDisconnect = () => {
    setIsConnected(false)
  }

  const onConnect = async() => {
    try {
      const currentProvider = detectCurrentProvider();
      if (currentProvider) {
        await currentProvider.request({method: 'eth_requestAccounts'})
        const web3 = new Web3(currentProvider)
        const userAccount = await web3.eth.getAccounts()
        setAccount(userAccount[0])
        setIsConnected(true)

        const networkId = await web3.eth.net.getId()
        const PeePTokenData =  PeeP_Token.networks[networkId]
        console.log("🚀 ~ file: App.js ~ line 43 ~ onConnect ~ PeePTokenData", PeePTokenData)

        if (PeePTokenData) {
          const PeeP_token = new web3.eth.Contract(PeeP_Token.abi, PeePTokenData.address)
          // some more code
        }
      }
    } catch (error) {
      console.log("🚀 ~ file: App.js ~ line 35 ~ onConnect ~ error", error)
    }
  }

  
  return (
    <div className="App">
      <header className="App-header">
        <h1>React App Auth</h1>
      </header>
      {!isConnected && (
        <div className='app-wrapper'>
        
          <button className='app-login' onClick={onConnect}>
            Login
          </button>
        </div>
      )}

      {isConnected && (
        <div className='app-wrapper'>

          <h1>you are now connected</h1>
          <div className="balance">
            
          </div>

          <button className='app-logout' onClick={onDisconnect}>
            logout
          </button>
        </div>
      )}

    </div>
  );
}

export default App;
   

Answer 1

I could not import json file once with webpack so I used fetch

const [contract,setContract]=useState(null)

useEffect(() => {
  // make sure you are passing correct path
  fetch("./build/PeeP_Token.json")
    .then((data) => data.json())
    .then((data) => setContract(data));
  
}, []);