TypeError:destroy不是函数

Question

在使用"useContext(RobinhoodContext("并导入useContext(我认为这就是发生的事情(后，我收到了这个错误。这是我的代码：

import { createContext } from 'vm'
import { RobinhoodContext } from '../context/RobinhoodContext'
const styles = {
inputAmount: `w-1/2 flex items-center justify-center border border-white rounded-lg p-2 bg-transparent mt-6 text-white placeholder:text-white`,
formContainer: `flex items-center`,
select: `w-1/2 flex items-center justify-center border border-white rounded-lg p-2 bg-transparent mt-6 text-white placeholder:text-white`,
options: `w-1/2 flex items-center justify-center border border-white rounded-lg p-2 bg-black mt-6 text-white placeholder:text-white`,
noticeCTA: 'font-bold text-green-500 cursor-pointer mt-5',
}
const BuyTokens = () => {
const {
isAuthenticated,
setAmount,
mint,
setCoinSelect,
coinSelect,
amount,
toCoin,
setToCoin,
} = useContext(RobinhoodContext)
return (
<form className={styles.formContainer}>
<div className='flex h-full w-full flex-col items-center'>
<select className={styles.select}
value={coinSelect}
onChange={e=> setCoinSelect(e.target.value)}
>
<option className={styles.options} value= 'BTC'>
BTC
</option>
<option className={styles.options} value= 'ETH'>
ETH
</option>
<option className={styles.options} value= 'DOGE'>
DOGE
</option>
<option className={styles.options} value= 'SOL'>
SOL
</option>
<option className={styles.options} value= 'USDC'>
USDC
</option>
</select>
<select className={styles.select}
value={coinSelect}
onChange={e=> setCoinSelect(e.target.value)}
>
<option className={styles.options} value= 'BTC'>
BTC
</option>
<option className={styles.options} value= 'DOGE'>
DOGE
</option>
<option className={styles.options} value= 'SOL'>
SOL
</option>
<option className={styles.options} value= 'USDC'>
USDC
</option>
</select>
<input placeholder='Amount...'
className={styles.inputAmount}
type='text' 
value={amount}
onChange={e => setAmount(e.target.value)}
/>
<button 
className={styles.noticeCTA}
type= 'button'
disabled={!isAuthenticated}
onClick={()=>mint()}
>
Send
</button>
</div>
</form>
)
}
export default BuyTokens

这是RobinhoodContext.js文件：

import { createContext, useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import {
dogeAbi,
bitcoinAbi,
solanaAbi,
usdcAbi,
dogeAddress,
bitcoinAddress,
solanaAddress,
usdcAddress,
} from '../lib/constants'
export const RobinhoodContext = createContext()
export const RobinhoodProvider = ({children}) => {
const [currentAccount, setCurrentAccount ] = useState('')
const [formattedAccount, setFormattedAccount] = useState('')
const [coinSelect, setCoinSelect] = useState('DOGE')
const [toCoin, setToCoin] = useState('')
const [balance, setBalance] = useState('')
const [amount, setAmount] = useState('')
const { isAuthenticated, authenticate, user, logout, Moralis, enableWeb3 } = useMoralis()
useEffect(async() => {
if(isAuthenticated) {
const account = user.get('ethAddress')
let formatAccount = account.slice(0,4) + '...' + account.slice(-4)
setFormattedAccount(formatAccount)
setCurrentAccount(account)
const currentBalance = await Moralis.Web3API.account.getNativeBalance({
chain: 'rinkeby',
address: currentAccount,
})
const balanceToEth = Moralis.Units.FromWei(currentBalance.balance)
const formattedBalance = parseFloat(balanceToEth).toFixed(3)
setBalance(formattedBalance)
}
}, [isAuthenticated, enableWeb3])
useEffect(() => {
if(!currentAccount) return
;(async ()=>{
const response = await fetch('/api/createUser', {
method: 'POST',
headers: {
'Content-Type' : 'application/json',
},
body: JSON.stringify({
walletAddress : currentAccount,
}),
})
const data = await response.json()
})
}, [currentAccount])
const getContractAddress = ()=> {
if(coinSelect === 'BTC') return bitcoinAddress
if(coinSelect === 'DOGE') return dogeAddress
if(coinSelect === 'SOL') return solanaAddress
if(coinSelect === 'USDC') return usdcAddress
}
const connectWallet = () => {
authenticate()
}
const signOut = () => {
logout()
}
return (
<RobinhoodContext.Provider
value={{
connectWallet,
signOut,
currentAccount,
isAuthenticated,
formattedAccount,
}}
>
{children}
</RobinhoodContext.Provider>
)
}

此外，这是错误：

未处理的运行时错误

类型错误：销毁不是的功能

调用堆栈安全调用销毁node_modules/react-dom/cjs/react-dom.development.js(22831:0(

commitHookEffectList卸载node_modules/react-dom/cjs/react-dom.development.js(22999:0(

invokePassiveEffectUnmountInDEVnode_modules/react-dom/cjs/react-dom.development.js(25097:0(

invokeEffectsInDevnode_modules/react-dom/cjs/react-dom.development.js(27304:0(

commitDoubleInvokeEffectsInDEVnode_modules/react-dom/cjs/react-dom.development.js(27277:0(

flushPassiveEffectsImplnode_modules/react-dom/cjs/react-dom.development.js(27007:0(

flushPassiveEffectsnode_modules/react-dom/cjs/react-dom.development.js(26935:0(

根上执行同步工作node_modules/react-dom/cjs/react-dom.development.js(26032:0(

flushSyncCallbacksnode_modules/react-dom/cjs/react-dom.development.js(12009:0(

commitRootImplnode_modules/react-dom/cjs/react-dom.development.js(26910:0(

commitRootnode_modules/react-dom/cjs/react-dom.development.js(26638:0(

finishConcurrendernode_modules/react-dom/cjs/react-dom.development.js(25937:0(

在根上执行并发工作node_modules/react-dom/cjs/react-dom.development.js(25765:0(

workLoopnode_modules/scheller/cjs/scheller.development.js(266:0(

flushWorknode_modules/scheller/cjs/scheller.development.js(239:0(

绩效工作截止日期node_modules/scheller/cjs/scheller.development.js(533:0(

我已经被这个问题困扰了一段时间了。请帮忙。

Answer 1

问题是您将useEffect作为异步函数。。

请参阅以了解详细信息。。https://medium.com/geekculture/react-uncaught-typeerror-destroy-is-not-a-function-192738a6e79b

const asyncFunction = async () => {
if(isAuthenticated) {
const account = user.get('ethAddress')
let formatAccount = account.slice(0,4) + '...' + account.slice(-4)
setFormattedAccount(formatAccount)
setCurrentAccount(account)
const currentBalance = await Moralis.Web3API.account.getNativeBalance({
chain: 'rinkeby',
address: currentAccount,
})
const balanceToEth = Moralis.Units.FromWei(currentBalance.balance)
const formattedBalance = parseFloat(balanceToEth).toFixed(3)
setBalance(formattedBalance)
}
}

useEffect(() => {      
asyncFunction()
// or you can use it as below..
// (async function () {
// Function Definition
// })();
}, [isAuthenticated, enableWeb3])