React条件渲染异常：已连接Metamask时短暂加载错误div

问题根因 #

闪烁是因为rememberWallet是异步调用，初始状态下walletAddress为空值，首次渲染时异步请求还没返回钱包地址，所以会先渲染连接按钮，等异步请求拿到地址更新状态后才切换到首页，就出现了短暂的按钮闪现。

修复方案 #

新增一个加载状态，在钱包地址校验完成前不渲染业务内容，等校验结束后再决定展示首页还是连接按钮，修改后代码如下：

function App() {
  const [walletAddress, setWallet] = useState("");
  // 新增加载状态，初始为true
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 兼容未安装Metamask的环境，避免报错
    if (!window.ethereum) {
      setIsLoading(false);
      return;
    }
    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)
    // 地址校验完成，结束加载状态
    setIsLoading(false);
  }

  function addWalletListener() {
    window.ethereum.on("accountsChanged", (accounts) => {
      if (accounts.length > 0) {
        setWallet(accounts[0]);
      } else {
        setWallet("");
      }
    });
  }

  // 加载阶段可返回和首页背景一致的容器，完全避免视觉跳变
  if (isLoading) {
    return <div>加载中...</div>;
  }

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

export default App;

如果不需要显示加载提示，直接把加载阶段的返回值换成和首页样式一致的空div即可，用户完全感知不到加载过程，不会有任何视觉闪烁。

内容的提问来源于stack exchange，提问作者Michele