使用React useContext(RobinhoodContext)时出现TypeError: destroy is not a function错误求助

Hey there, let's tackle that TypeError: destroy is not a function error you're stuck on—it's a super common React hook gotcha, so we'll get this fixed quickly!

What's Causing the Error? #

The core issue here is that you’re passing an async function directly to useEffect. React expects the useEffect callback to either return a cleanup function (for teardown logic) or undefined. When you use an async function, it returns a Promise instead, and React tries to treat that Promise as a cleanup function (which it calls "destroy" internally)—hence the error that a function was expected but got a Promise.

Looking at your RobinhoodContext.js, the first useEffect is declared with async directly, which breaks React's rules:

// ❌ Invalid: Async function as useEffect callback
useEffect(async() => {
  if(isAuthenticated) {
   // ... your balance-fetching code
  }
 }, [isAuthenticated, enableWeb3])

Step 1: Fix the Async useEffect #

Instead of making the useEffect callback itself async, wrap your async logic inside a regular function within the hook, then call that function. Here's the corrected version:

// ✅ Valid: Async logic wrapped in a nested function
useEffect(() => {
  const fetchAccountData = async () => {
    if(!isAuthenticated || !user) return;
    
    const account = user.get('ethAddress');
    const formattedAccount = account.slice(0,4) + '...' + account.slice(-4);
    setFormattedAccount(formattedAccount);
    setCurrentAccount(account);

    // Fetch balance using the account variable (not currentAccount, since state hasn't updated yet)
    const currentBalance = await Moralis.Web3API.account.getNativeBalance({
      chain: 'rinkeby',
      address: account,
    });
    const balanceToEth = Moralis.Units.FromWei(currentBalance.balance);
    const formattedBalance = parseFloat(balanceToEth).toFixed(3);
    setBalance(formattedBalance);
  };

  fetchAccountData();
}, [isAuthenticated, user, Moralis]) // Updated dependencies to include user and Moralis

Step 2: Fix the Second useEffect's Syntax & Execution #

Your second useEffect has a syntax quirk and wasn’t even running the async function. Let’s clean that up too:

useEffect(() => {
  if(!currentAccount) return;

  const createUserInDB = async () => {
    const response = await fetch('/api/createUser', {
      method: 'POST',
      headers: {
        'Content-Type' : 'application/json',
      },
      body: JSON.stringify({
        walletAddress : currentAccount,
      }),
    });
    const data = await response.json();
    // Add logic here to handle the response if needed
  };

  createUserInDB();
}, [currentAccount])

Step 3: Fix Missing Context Values #

You’re destructuring values like setAmount, mint, and setCoinSelect in your BuyTokens component, but your RobinhoodContext.Provider isn’t including these in its value prop. This will cause undefined errors once you fix the useEffect issue. Update the provider to pass all the needed values:

// Inside RobinhoodProvider's return statement
<RobinhoodContext.Provider value={{
  connectWallet,
  signOut,
  currentAccount,
  isAuthenticated,
  formattedAccount,
  // Add the missing context properties here
  coinSelect,
  setCoinSelect,
  toCoin,
  setToCoin,
  amount,
  setAmount,
  mint, // Don't forget to define the `mint` function in your provider!
}} >
  {children}
</RobinhoodContext.Provider>

Don’t forget to actually define the mint function in your RobinhoodProvider—right now it’s missing, and you’re calling it in BuyTokens, so that’ll be your next fix once the current error is resolved.

These changes should eliminate the "destroy is not a function" error, get your async logic running properly, and fix the missing context values.

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