如何点击一个按钮，按顺序执行 2 次合约操作（只有当第一次操作结束之后，才进行第二步操作） | 登链社区

50 如何点击一个按钮，按顺序执行 2 次合约操作（只有当第一次操作结束之后，才进行第二步操作）

回答问题即可获得 5 贡献值，回答被采纳后即可获得 55 学分。

具体的代码，参见链接：https://github.com/linghuccc/multi-call-test

我也把它放到了 codesandbox，但是好像运行不起来：https://codesandbox.io/p/github/linghuccc/multi-call-test/main?import=true

主要的代码都在 src/App.tsx 文件，现在按 button 之后，只会运行 action1() ；希望能达到的效果是：按 button 之后， action1() 先运行，运行成功之后，接着运行 action2() 。

(试过 await，但总是显示‘await’ has no effect on the types of this expression.)

0 条评论
分类：其他

默认排序时间排序

2 个回答

Tiny熊 2024-06-23 22:02

　擅长：智能合约,以太坊

Wade - Footprint Analytics CTO 2024-06-27 19:29

　擅长：数据分析,GameFi,NFT

1. action1 和 action2 函数并没有返回任何值，这看起来它们应该返回一个 Promise，以便 await 能够等待它们完成。
2. App 组件中的 handleClick 函数需要被声明为 async 才能使用 await
```js
// src/App.tsx

import React, { useState } from 'react';

// 假设 action1 和 action2 返回 Promise
async function action1() {
  // 执行一些异步操作
  console.log('Running action1');
  return Promise.resolve('Action 1 completed');
}

async function action2() {
  // 执行一些异步操作
  console.log('Running action2');
  return Promise.resolve('Action 2 completed');
}

function App() {
  const [result, setResult] = useState('');

async function handleClick() {
    try {
      // 等待 action1 完成
      const res1 = await action1();
      setResult(res1); // 更新状态

// 等待 action2 完成
      const res2 = await action2();
      setResult(res2); // 更新状态
    } catch (error) {
      // 处理任何可能发生的错误
      console.error('An error occurred:', error);
    }
  }

return (
    <div>
      <button onClick={handleClick}>Run Actions</button>
      <p>Result: {result}</p>
    </div>
  );
}

export default App;
```