React / Web3：componendDidMount 和 Function 中的不同行为

Posted 2023-02-18

【中文标题】React / Web3：componendDidMount 和 Function 中的不同行为

【英文标题】：React / Web3: different behavior in componendDidMount and Function

【发布时间】：2021-11-29 04:18:02

【问题描述】：

我正在使用 Web3.js 构建一个 React.js 应用程序以连接到浏览器中的 MetaMask。

下面的函数提供了想要的结果 -> 它触发 MetaMask 打开并连接到钱包。

代码：

async componentDidMount() 
    let adr = null;

    try 
        adr = await this.state.web3.eth.requestAccounts();

        this.setState(
            address: adr[0]
        );
     catch (e) 
        if (e.code === 4001) 
            // EIP-1193 userRejectedRequest error
            // If this happens, the user rejected the connection request.
            console.log('Please connect to wallet.');
         else 
            console.error(e.message);
        
    

下面的函数具有相同的代码，但不是在安装 React 组件时自动调用，而是通过单击按钮触发。不幸的是，结果是以下错误：

TypeError: Cannot read properties of undefined (reading 'state')
at loginWithEth (WalletAuth.js:52)

代码：

async loginWithEth() 
    let adr = null;

    try 
        adr = await this.state.web3.eth.requestAccounts(); //that's line 52 where the errors is thrown

        this.setState(
            address: adr[0]
        );
     catch (e) 
        if (e.code === 4001) 
            // EIP-1193 userRejectedRequest error
            // If this happens, the user rejected the connection request.
            console.log('Please connect to wallet.');
         else 
            console.error(e.message);
        
    

希望有人可以帮助我！

谢谢！

【问题讨论】：

你在类中绑定loginWithEth方法了吗？根据docsYou have to be careful about the meaning of this in JSX callbacks. In javascript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

我猜你必须bind onClick 到组件，但这是一些看起来很老的反应，今天你应该用函数和 useState / useEffect 做这些事情

【参考方案1】：

错过在课堂上绑定loginWithEth！

this.loginWithEth = this.loginWithEth.bind(this);

谢谢，Junaid 和 pguardiario。