部署使用 MetaMask 的 React 應用程序的正確方法是什麼？

我正在學習安全帽和乙太幣，所以我製作了一個 create-react-app 來與 rinkeby 上的合約進行互動。react 應用程序在本地執行良好，但是當我將其部署到 Surge 時，我收到錯誤並且無法再訪問契約。我不確定這是因為乙太幣還是 metamask 提供給乙太幣的提供者。

這是通過元遮罩設置提供者和簽名者的程式碼：

 useEffect(() => {
   const init = async () => {
     const provider = await detectEthereumProvider();
     if (provider) {
       startApp(provider);
     } else {
       alert('Please install MetaMask!');
       setIsLoading(false);
       return;
     };

     async function startApp(provider) {
       if (provider !== window.ethereum) {
         alert('Do you have multiple wallets installed?');
         setIsLoading(false);
         return;
       };

       const ethersProvider = new ethers.providers.Web3Provider(provider);
       const signer = ethersProvider.getSigner();

       let signerAddress = await signer.getAddress();
       setCurrentMetaMaskAccount(signerAddress);

       const _myToken = new ethers.Contract(
         myTokenContractAddress.MyToken,
         MyToken.abi,
         signer
       );
       setMyToken(_myToken);

       const _faucet = new ethers.Contract(
         faucetContractAddress.Faucet,
         Faucet.abi,
         signer
       );
       setFaucet(_faucet);
     };
   };
   init();
 }, []);

部署的 React 應用程序會產生這個錯誤：

Uncaught (in promise) Error: unknown account #0 (operation="getAddress", code=UNSUPPORTED_OPERATION, version=providers/5.1.2)

我遵循了使用元遮罩的 Ether.js 文件：

const provider = new ethers.providers.Web3Provider(window.ethereum)
const signer = provider.getSigner()

我應該怎麼做才能設置 ethers.js 和 metamask 以便它們在部署的 react 應用程序上工作？

這裡的問題是，您需要先請求從元遮罩訪問帳戶，然後才能將其用作簽名者。

這讓我困惑了很長時間，因為從 ethers.js 文件或 Metamask 的文件中肯定不清楚。

對我有用的是添加以下程式碼：

window.ethereum.on('accountsChanged', this.handleAccountsChanged);

window.ethereum.request({
   method: 'eth_requestAccounts'
})
//successful request will trigger accountsChanged event
.catch(this.handleError);

以及一些這樣的功能：

handleAccountsChanged = (accounts) => {
   if (accounts.length === 0) {
       // Wallet is locked or the user has not connected any accounts
       this.account = null;
       console.log('Please connect your wallet (Metamask, TrustWallet, etc).');
   } else if (accounts[0] !== this.account) {
       this.account = accounts[0];
   }

   this.initialised = true;
}

handleError = (error) => {
   // EIP 1193 userRejectedRequest error
   if (error.code === 4001) {
       console.log('Please connect your wallet (Metamask, TrustWallet, etc).');
   //other errors
   } else {
       console.log(error);
   }
}

引用自：https://ethereum.stackexchange.com/questions/97693