React - 将类转换为前端的函数组件答案

【问题标题】：React - Converting Class to Function Components For Front-EndReact - 将类转换为前端的函数组件
【发布时间】：2021-09-10 23:40:15
【问题描述】：

我一直致力于将简单的单产农业 DAPP 从类转换为功能组件。

到目前为止，加载合约和获取数据都很好，但我被困在两部分 - 我调用 staking 智能合约的存款功能的部分，以及如何从我的按钮启动它。

这完全在类组件中工作，而不是函数对话。我将粘贴类/函数版本进行比较。

我一直在浏览 React 文档并尝试通过纯测试来填补空白，但未能通过更新代码库的最后一部分。

对我在这里缺少什么有任何见解吗？

调用 Staking 智能合约函数的 REACT 函数

类比较。版本：

stakeTokensVault = (amount) => {
    this.setState({loading: true })
    this.state.tether.methods.approve(this.state.chadsVault._address, amount).send({from: this.state.account}).on('transactionHash', (hash) => {
      this.state.chadsVault.methods.stake(amount).send({from: this.state.account}).on('transactionHash', (hash) => {
        this.setState({loading:false})
      })
    }) 
  }

功能比较。版本：

function stakeTokensVault(amount) {
    // this.setState({loading: true })
    tether.methods.approve(chadsVault._address, amount).send({from: account[0]}).on('transactionHash', (hash) => {
      chadsVault.methods.stake(amount).send({from: account[0]}).on('transactionHash', (hash) => {
        // this.setState({loading:false})
      })
    }) 
  }

调用存款功能的UI按钮

类比较。版本：

<input class="form-control" ref={(input)=> {this.input = input} } id="exampleInputText1" type="text" placeholder="Amount" required />
                                <button 
                                    type='submit'
                                    onClick={(event) => {
                                    event.preventDefault()
                                    let amount
                                    amount = this.input.value.toString()
                                    amount = window.web3.utils.toWei(amount, 'Ether')
                                    this.props.stakeTokensVault(amount)
                                    }}
                                    className='btn btn-primary btn-lg btn-block'>DEPOSIT
                                </button>

功能比较。版本：

<input type="number" ref={inputRef} className="form-control" />
                                
                                <button 
                                    type='submit'
                                    onClick={(event) => {
                                    event.preventDefault()
                                    let amount
                                    amount = inputRef.value.toString() 
                                    amount = window.web3.utils.toWei(amount, 'Ether')
                                    props.stakeTokensVault(amount)
                                    }}
                                    className='btn btn-primary btn-lg btn-block'>DEPOSIT
                                </button>

目前用于函数 comp。版本，如上面的代码所示，我收到错误消息：“TypeError: Cannot read properties of undefined (reading 'toString')。”

【问题讨论】：

对于第一个错误，您使用的是this.state.account，因此转换为钩子的值应该是[account, setAccount] = useState() 和变量account，可能不像你正在做的account[0]。最后一个错误是因为inputRef.value 是null。 IIRC，现在称为inputRef.current，您可以将其注销以确认。请记住，第一次渲染时引用始终为null。
感谢您的帮助。

标签： javascript reactjs react-hooks blockchain solidity

【解决方案1】：

在下面粘贴我的工作版本，以供那些因相同或类似问题参考这篇文章的人。

带按钮的输入表单：

<input type="number" ref={inputRef} className="form-control" />
                                
                                <button 
                                    type='submit'
                                    onClick={(event) => {
                                    event.preventDefault()
                                    let amount
                                    amount = inputRef.current.value.toString() 
                                    amount = window.web3.utils.toWei(amount, 'Ether')
                                    props.stakeTokensVault(amount)
                                    }}
                                    className='btn btn-primary btn-lg btn-block'>DEPOSIT
                                </button>

还有质押/存款功能：

const stakeTokensVault = (amount) => {
  
    tether.methods.approve(chadsVault._address, amount).send({from: account}).on('transactionHash', (hash) => {
    chadsVault.methods.stake(amount).send({from: account}).on('transactionHash', (hash) => {
   
    })
  })
}

【讨论】：