50 如何点击一个按钮，按顺序执行 2 次合约操作（只有当第一次操作结束之后，才进行第二步操作）
具体的代码，参见链接：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.)
最佳答案 2024-11-20 09:50
- action1 和 action2 函数并没有返回任何值，这看起来它们应该返回一个 Promise，以便 await 能够等待它们完成。
- App 组件中的 handleClick 函数需要被声明为 async 才能使用 await
// 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;
