未处理的运行时错误：尝试使用 Solana 钱包适配器发送交易时无法读取未定义的属性（读取“toString”）

Question

我正在关注 Solana 的在线教程，但当我尝试使用 Phantom 钱包进行新交易时，我陷入了困境 - Create React App 不断显示错误消息：

未处理的运行时错误 WalletSendTransactionError：无法读取未定义的属性（读取“toString”）

调用堆栈 PhantomWalletAdapter.sendTransaction node_modules/@solana/wallet-adapter-phantom/lib/esm/adapter.js (138:0) 异步评估 node_modules/@solana/wallet-adapter-react/lib/esm/WalletProvider.js (196:0)

以下是与进行交易相关的js文件：

//cashapp.js

import { useState, useEffect } from 'react'
import { getAvatarUrl } from '../functions/getAvatarUrl'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { useConnection, useWallet } from '@solana/wallet-adapter-react'
import {
  clusterApiUrl,
  Connection,
  Keypair,
  LAMPORTS_PER_SOL,
  PublicKey,
  SystemProgram,
  Transaction,
} from '@solana/web3.js'
import BigNumber from 'bignumber.js'

export const useCashApp = () => {
  const [avatar, setAvatar] = useState('')
  const [userAddress, setUserAddress] = useState(
    '11111111111111111111111111111111'
  )
  const [amount, setAmount] = useState(0)
  const [receiver, setReceiver] = useState('')
  const [transactionPurpose, setTransactionPurpose] = useState('')

  const { connected, publicKey, sendTransaction } = useWallet()
  const { connection } = useConnection()

  // Get Avatar based on the userAddress
  useEffect(() => {
    if (connected) {
      setAvatar(getAvatarUrl(publicKey.toString()))
      setUserAddress(publicKey.toString())
    }
  }, [connected])

  //Create the transaction to send to our wallet and we can sign it from there!
  const makeTransaction = async (fromWallet, toWallet, amount, reference) => {
    const network = WalletAdapterNetwork.Devnet
    const endpoint = clusterApiUrl(network)
    const connection = new Connection(endpoint)

    // Get a recent blockhash to include in the transaction
    const { blockhash } = await connection.getLatestBlockhash('finalized')

    const transaction = new Transaction({
      recentBlockhash: blockhash,
      //The buyer pays the transaction fee
      feePayer: fromWallet,
    })

    //Create the instruction to send SOL from owner to recipient
    const transferInstruction = SystemProgram.transfer({
      fromPubkey: fromWallet,
      lamports: amount.multipliedBy(LAMPORTS_PER_SOL).toNumber(),
      toPubkey: toWallet,
    })

    transferInstruction.keys.push({
      pubKey: reference,
      isSigner: false,
      isWritable: false,
    })

    transaction.add(transferInstruction)

    return transaction
  }

  //Create the function to RUN the transaction. This will be added to the button
  async function doTransaction({ amount, receiver, transactionPurpose }) {
    const fromWallet = publicKey
    const toWallet = new PublicKey(receiver)
    const bnAmount = new BigNumber(amount)
    const reference = Keypair.generate().publicKey
    const transaction = await makeTransaction(
      fromWallet,
      toWallet,
      bnAmount,
      reference
    )

    const txnHash = await sendTransaction(transaction, connection)
    // // console.log(txnHash)
  }

  return {
    connected,
    publicKey,
    avatar,
    userAddress,
    doTransaction,
    makeTransaction,

    amount,
    setAmount,
    receiver,
    setReceiver,
    transactionPurpose,
    setTransactionPurpose,
    setUserAddress,
  }
}

//NewTransactionModal.js
import { useState } from 'react'
import Modal from '../Modal'
import { useCashApp } from '../../hooks/cashapp'

const NewTransactionModal = ({ modalOpen, setModalOpen, addTransaction }) => {
  const {
    amount,
    setAmount,
    receiver,
    setReceiver,
    transactionPurpose,
    setTransactionPurpose,
    doTransaction,
  } = useCashApp()

  const onAmountInput = (e) => {
    e.preventDefault()
    const newAmount = e.target.value

    setAmount(newAmount)

    const input = document.querySelector('input#amount')
    input.style.width = newAmount.length + 'ch'
  }

  const onPay = async () => {
    // Pay and add transaction funcationallity goes here!
    await doTransaction({ amount, receiver, transactionPurpose })

    // Clear states
    setAmount(0)
    setReceiver('')
    setTransactionPurpose('')
  }

  return (
    <Modal modalOpen={modalOpen} setModalOpen={setModalOpen}>
      <div className="relative flex flex-col items-center justify-center space-y-8">
        <div className="flex items-center justify-center text-center text-7xl font-semibold text-[#00d54f]">
          <input
            className="w-12 outline-none"
            id="amount"
            name="amount"
            type="number"
            value={amount}
            onChange={onAmountInput}
            min={0}
          />
          <label htmlFor="amount">SOL</label>
        </div>

        <div className="flex w-full flex-col space-y-2">
          <div className="flex rounded-lg border border-gray-200 p-4">
            <label className="text-gray-300" htmlFor="receiver">
              To:
            </label>
            <input
              className="w-full pl-2 font-medium text-gray-600 placeholder-gray-300 outline-none"
              id="receiver"
              name="receiver"
              type="text"
              placeholder="Name, $Cashtag, SMS, Email"
              value={receiver}
              onChange={(e) => setReceiver(e.target.value)}
            />
          </div>

          <div className="flex rounded-lg border border-gray-200 p-4">
            <label className="text-gray-300" htmlFor="transactionPurpose">
              For:
            </label>
            <input
              className="w-full pl-2 font-medium text-gray-600 placeholder-gray-300 outline-none"
              id="transactionPurpose"
              name="transactionPurpose"
              type="text"
              placeholder="Dinner, Rent, etc."
              value={transactionPurpose}
              onChange={(e) => setTransactionPurpose(e.target.value)}
            />
          </div>
        </div>

        <div className="flex w-full space-x-1">
          <button
            onClick={onPay}
            className="w-full rounded-lg bg-[#00d54f] py-3 px-12 text-white hover:bg-opacity-70"
          >
            Pay
          </button>
        </div>
      </div>
    </Modal>
  )
}

export default NewTransactionModal

请让我知道我应该去哪里寻找错误。谢谢！

我检查并确保所有需要导入的组件和方法都已导入。我希望我没有错过任何事情。交易应该完成并且应该要求签字。