React Toastify未显示NFT购买Promise拒绝错误的求助

你需要在catch块中解析错误对象，提取友好的用户提示并调用React Toastify的错误提示方法，修改后的代码如下：

const _contract = contract;
const buyNft = useCallback(
  async (tokenId: number, value: number) => {
    try {
      const result = await _contract!.buyNft(tokenId, {
        value: ethers.utils.parseEther(value.toString()),
      });
      await toast.promise(result!.wait(), {
        pending: "Processing",
        success: "Nft is yours!",
        error: "Processing error",
      });
    } catch (error: any) {
      // 初始化默认错误提示
      let errorMessage = "购买NFT失败，请稍后重试";
      
      // 识别资金不足的错误，替换为友好提示
      if (error.data?.message?.includes("insufficient funds")) {
        errorMessage = "账户资金不足，请检查余额后重试";
      }
      // 处理其他包含明确信息的错误
      else if (error.message) {
        errorMessage = error.message;
      }

      // 展示错误提示
      toast.error(errorMessage);
      console.error("购买NFT出错", error);
    }
  },
  [_contract]
);

代码说明： #

1. 为错误变量添加any类型，方便访问嵌套的RPC错误属性
2. 预设默认提示，避免用户看到技术化的原始错误信息
3. 通过字符串匹配识别资金不足的场景，给出针对性提示
4. 调用toast.error()将处理后的提示展示给用户，替代原有的仅控制台打印

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