如何在链函数中调用外部函数？

Question

这是一个关于 React 和 Dapp 的案例。

我调用 web3j 来 sendTransaction 并通过 chian 函数等待回调。 发生错误时，我无法调用 App 内的函数。

我在错误块周围的代码中描述了以下情况。

是否可以调用函数handleError？

//My code
class App extends Component {
    constructor(props) {
        super(props);
            this.state = {
            status: ''
            };
    };
    
    startTrade(){
        web3.eth.sendTransaction({
            from: "0x123....",
            to: "0x456....", 
            value: web3.utils.toWei("2", "ether"),
        }).on('error', (error)=>{
            
            //If write this line,the browser shows directly:
            //Failed to compile
            //src\App.js
            //Line 62:7:  'handleFail' is not defined  no-undef     
            
            //handleError(); 
            
            //If add this. when error occurs,the console shows:
            //App.js:62 Uncaught TypeError: Cannot read properties of undefined (reading 'handleFail')
            
            //this.handleFail();

            //If I call otherHandle,It's work.
            //However I don't have the instance of App to change something...
            //otherHandle();
        }); 
    }
    handleError(){
       console.log("Do something..");
    }
    render(){ return();
    }
}
function otherHandle(){
    console.log("Do something..");
}

Answer 1

export default function App() {
  const handleError = (error) => {
    console.log("Do something..", error.message);
 }

  const startTrade = ()=>{
    web3.eth.sendTransaction({
        from: "0x0Cb......",
        to: "0x61d63........", 
        value: web3.utils.toWei("2", "ether"),
    }).on('error', (error)=>{
        handleError(error); 
    }); 
}

    // useEffect Function...
    useEffect(() => {
      startTrade();
      // eslint-disable-next-line 
  }, []);

  return (
    <div className="App">
    </div>
  );
}