Wagmi薄荷

Question

我在dapp中使用Wagmi钩子。另外，我还用RainbowKit来连接钱包。现在，我正在尝试使用Wagmi来执行我的智能合同的mint功能。如图所示，它需要三个参数。

function mint(uint256 _amount, string memory _uri, bytes memory _data) public onlyOwner {}

我知道，要通过Wagmi发出事务获得适当的结果，我们需要按顺序填充这些钩子，usePrepareContractWrtie()、useContractWrite()和useWaitForTransaction()

现在让我们看看我的问题是什么。在我的usePrepareContractWrite()中，我将一些固定的参数传递给mint函数，以实践这种方法的工作方式。例如，[100,"",[]] (根据我的合同的薄荷功能)。对我来说效果很好。

但是，每当尝试使用表单输入(动态参数)时，都会遇到错误，这些输入存储在组件中的useState()钩子中。换句话说，我只能基于固定的条件来创建标记，并且还不能根据我的输入来创建NFT。

const { config } = usePrepareContractWrite({
    address: f_nftaddress,
    abi: F_NFT.abi,
    functionName: 'mint',
    args: [ 200, "", []],
})

我的表单输入声明：

const [ formInput, updateFormInput ] = useState({ quantity: "", name: "", description: "" });
const [ tokenUrl, setTokenUrl ] = useState(null);

在usePrepareContractWrite()中，在args: [ 200, "", []]中，我需要用formInput.quantitiy代替200，用tokenUrl代替""。

有人能帮我解决这个问题吗？

提前感谢

Answer 1

要在usePrepareContractWrite()钩子中使用表单输入值，可以从formInput状态中对值进行重构，并将它们作为参数传递到args属性中。例如：

const { quantity, name, description } = formInput;
const { config } = usePrepareContractWrite({
  address: f_nftaddress,
  abi: F_NFT.abi,
  functionName: "mint",
  args: [quantity, tokenUrl, [name, description]],
});

这将在tokenUrl ()钩子的args属性中使用来自formInput状态和tokenUrl状态的quantity和tokenUrl值。