使用以太币签署和发送交易时出现错误

Question

当函数尝试执行时，我在浏览器控制台中收到错误

signTransaction

，即使交易已成功广播到区块链。加载变量永远不会设置为 false，即函数结束执行时。

Uncaught (in promise) TypeError: invalid BytesLike value (argument="value", value={ "_type": "TransactionResponse", "accessList": null, "blobVersionedHashes": null, "blockHash": null, "blockNumber": null, "chainId": null, "data": "0x3f4a5d0a00000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000e0000000000000000000000000000000000000000000000000000000000000012000000000000000000000000000000000000000000000000000000000000001400000000000000000000000000000000000000000000000000000000066a5e97e00000000000000000000000000000000000000000000000000000000000000067064736b6a6600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000006717064776a6600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000966616473662e636f6d0000000000000000000000000000000000000000000000", "from": "0xc768B39DBcBCCfD6dECae24b0a591e78BEA3382F", "gasLimit": "203181", "gasPrice": "35133400011", "hash": "0x9c31df9f6bd4778fbdd32f0438711a3d555f2482094275235069e4b6221f66ee", "index": null, "maxFeePerBlobGas": null, "maxFeePerGas": "35133400011", "maxPriorityFeePerGas": "35133399990", "nonce": 23, "signature": { "_type": "signature", "networkV": null, "r": "0x7c377e75a739b7f81a2e148641e5b577e32c5fb592d0bbe0d42a2ac76be9e038", "s": "0x4e62a1e353b4aeb5645f8bae9325e8661e841f9a354cd851314923b1fd28f3b5", "v": 27 }, "to": "0x0Bc1FcA0bC7b0B06fDa8DB3A1Cb0504A06404923", "type": 2, "value": "0" }, code=INVALID_ARGUMENT, version=6.13.1)

'use client'

import { useRouter } from "next/navigation";
import React, { useEffect } from "react";
import { useData } from "../../contexts/DataContext";
import { usePrivy, useWallets } from "@privy-io/react-auth";

const Admin = () => {
  const router = useRouter();
  const { goMarket, loadBlockchainData, account, walletSigner, feeData, provider } = useData!();
  const [loading, setLoading] = React.useState(false);

  const [title, setTitle] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [category, setCategory] = React.useState("");
  const [url, setURL] = React.useState("");
  const [timestamp, setTimestamp] = React.useState<
    string | number | readonly string[] | undefined
  >(Date());

  useEffect(() => {
    loadBlockchainData();
  }, [loading, account]);

  const handleSubmit = async () => {
    setLoading(true);

    let dateInWeek = new Date();
    dateInWeek.setDate(dateInWeek.getDate() + 7);
    const deadline = Math.floor(dateInWeek.getTime() / 1000);
    setTimestamp(deadline);

    const gasLimit = await goMarket.createMarket.estimateGas(title, description, category, url, timestamp);

    const tx = {
      from: walletSigner.address,
      to: goMarket.target,
      gas: gasLimit,
      nonce: await walletSigner.getNonce(),
      maxPriorityFeePerGas: feeData.maxPriorityFeePerGas.toString(),
      maxFeePerGas: feeData.maxFeePerGas.toString(),
      chainId: 80002,
      // data: goMarket.interface.encodeFunctionData('createMarket', [title, description, category, url, timestamp])
      data: await goMarket.createMarket(title, description, category, url, timestamp)
    };

    const signedTx = await walletSigner.signTransaction(tx);
    const sentTx = await provider.broadcastTransaction(signedTx);

    await sentTx.wait();

    setLoading(false);
    setTitle("");
    setDescription("");
    setCategory("");
    setURL("");
    setTimestamp(undefined);
    router.push("/");
  };
};

export default Admin;

我尝试对要发送的数据进行编码，但交易不成功。

data: goMarket.interface.encodeFunctionData('createMarket', [title, description, category, url, timestamp])

，因此，我使用

contract.METHOD_NAME

来发送数据。

Answer 1

我看到您在同一函数中将加载变量设置为 true 和 false。

在ReactJS中，状态的setter函数（例如类组件中的setState或功能组件中useState返回的状态更新函数）是异步的。这意味着当您调用 setter 函数来更新状态时，React 不会立即更新状态。相反，它安排稍后执行更新，通常是在当前函数完成执行之后。以下是此行为的一些关键原因：

1.  Batching for Performance: React batches multiple state updates together to improve performance. By scheduling updates instead of executing them immediately, React can minimize the number of re-renders, leading to better performance. This is especially important in larger applications where frequent re-renders can be costly.
2.  Avoiding Inconsistent States: If state updates were applied immediately, subsequent lines of code in the same function could see an inconsistent or intermediate state. By deferring the update, React ensures that all state updates within the same event cycle are processed together, maintaining consistency.
3.  Predictable Behavior: This asynchronous behavior makes the state management more predictable. It helps ensure that the component re-renders only after all the updates have been processed, which simplifies reasoning about the state and the component’s behavior.

因此，您的 setLoading() 并未按您预期的方式执行。

调整逻辑，使 setLoading(true) 和 setLoading(false) 位于两个不同的函数中。