错误:水化失败是因为初始UI与服务器上呈现的Wagmi和Nextjs不匹配。

Question

我试图在dapp中实现wagmi，在复制了文档https://wagmi.sh/examples/connect-wallet中的示例之后，我得到了一个错误：Error: Hydration failed because the initial UI does not match what was rendered on the server。下面是我的代码。

import { WagmiConfig, createClient, defaultChains, configureChains } from "wagmi";

import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";

import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { InjectedConnector } from "wagmi/connectors/injected";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
import Profile from "../components/Profile";
import TheHead from "../components/TheHead";

// Configure chains & providers with the Alchemy provider.
// Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)

// Pass client to React Context Provider
function App() {
  const { chains, provider, webSocketProvider } = configureChains(defaultChains, [
    alchemyProvider({ apiKey: process.env.RINKEBY_URL }),
    publicProvider(),
  ]);

  // Set up client
  const client = createClient({
    autoConnect: true,
    connectors: [
      new MetaMaskConnector({ chains }),
      new CoinbaseWalletConnector({
        chains,
        options: {
          appName: "wagmi",
        },
      }),
      new WalletConnectConnector({
        chains,
        options: {
          qrcode: true,
        },
      }),
      new InjectedConnector({
        chains,
        options: {
          name: "Injected",
          shimDisconnect: true,
        },
      }),
    ],
    provider,
    webSocketProvider,
  });

  return (
    
      
      
        
      
    
  );
}

export default App;

import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName } from "wagmi";

export default function Profile() {
  const { address, connector, isConnected } = useAccount();
  const { data: ensAvatar } = useEnsAvatar({ addressOrName: address });
  const { data: ensName } = useEnsName({ address });
  const { connect, connectors, error, isLoading, pendingConnector } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      
        
        {ensName ? `${ensName} (${address})` : address}
        {/* Connected to {connector.name} */}
        Disconnect
      
    );
  }

  return (
    
      {connectors.map((connector) => (
         connect({ connector })}>
          {connector.name}
          {!connector.ready && " (unsupported)"}
          {isLoading && connector.id === pendingConnector?.id && " (connecting)"}
        
      ))}

      {error && {error.message}}
    
  );
}

Answer 1

如果您将autoConnect:设置为false，它将解决您的问题。

Answer 2

裸体主义者给出的解决方案是完美的。再来一次，任何遇到这个问题的人都可以选择：

const [isDefinitelyConnected, setIsDefinitelyConnected] = useState(false);
const { address, isConnected } = useAccount();

useEffect(() => {
    if (isConnected) {
      setIsDefinitelyConnected(true);
    } else {
      setIsDefinitelyConnected(false);
    }
  }, [address]);

这样，当我们有连接用户的地址时，我们确保状态被正确地更新。

Answer 3

另一种解决方案是自己准备_isConnected和_connectors状态，并在组件挂载后更新这些状态。

例如,

export default function Profile() {
  const { address, connector, isConnected } = useAccount();
  const { connect, connectors, error, isLoading, pendingConnector } = useConnect();
  const [_isConnected, _setIsConnected] = useState(false);
  const [_connectors, _setConnectors] = useState([]);
  ...

  useEffect(() => {
    _setIsConnected(isConnected);
  }, [isConnected]);

  useEffect(() => {
    _setConnectors(connectors);
  }, [connectors]);

  if (_isConnected) {
    return (
      
       ...
      
    );
  }

  return (
    
     {_connectors.map((connector) => (
      ...
    
  );
}

这样，您可以将autoConnect:保持为true。