React-js：在条件渲染中加载时短暂错误 div

Question

以下脚本允许react-app连接到Metamask，然后显示主页；此外，如果用户已经连接

walletAddress.length>0

，我们想直接显示首页。（我简化了代码以使其更清晰）

function App() {
  const [walletAddress, setWallet] = useState("");

  useEffect(() => {
    rememberWallet();
    addWalletListener();
  }, []);

  const connectWalletPressed = async () => {
    const obj = await getCurrentWalletConnected('eth_requestAccounts')
    setWallet(obj.address);
};

async function rememberWallet(){
    const obj = await getCurrentWalletConnected('eth_accounts')
    setWallet(obj.address)
}


function addWalletListener() {
    window.ethereum.on("accountsChanged", (accounts) => {
        if (accounts.length > 0) {
            setWallet(accounts[0]);
        } else {
            setWallet("");
        }
    });
}
  console.log(walletAddress)
  return (
    walletAddress.length>0 ?
    <div>HOME PAGE</div>:
    <div><button id="walletButton" onClick={connectWalletPressed}>PRESS TO CONNECT METAMASK</button> </div>
  );
}

export default App;

重点是：当用户已经连接时，第二个呈现片刻。

非常感谢任何建议ù谢谢

Answer 1

感谢@Hozeis，我们找到了一个使用 50 毫秒超时显示空白页面的解决方法。

function App() {
    const [walletAddress, setWallet] = useState("");
    const [loading, setLoading] = useState(true); 
  
    useEffect(() => {
      rememberWallet();
      addWalletListener();
      setTimeout(() => setLoading(false), 50); //time-out required to assess myContext.walletAddress.length>0 ?
    }, []);
  
    const connectWalletPressed = async () => {
      const obj = await getCurrentWalletConnected('eth_requestAccounts')
      setWallet(obj.address);
  };
  
  async function rememberWallet(){
      const obj = await getCurrentWalletConnected('eth_accounts')
      setWallet(obj.address)
  }
  
  
  function addWalletListener() {
      window.ethereum.on("accountsChanged", (accounts) => {
          if (accounts.length > 0) {
              setWallet(accounts[0]);
          } else {
              setWallet("");
          }
      });
  }
  if (loading) {
    return null
}

    return (
      walletAddress.length>0 ?
      <div>HOME PAGE</div>:
      <div><button id="walletButton" onClick={connectWalletPressed}>PRESS TO CONNECT METAMASK</button> </div>
    );
  }
  
  export default App;

React-js：在条件渲染中加载时短暂错误 div

React-js: briefly wrong div loaded in conditional rendering

reactjs

conditional-statements

metamask