调用solidity函数来响应JS

Question

我是ReactJS＆Solidity的新手。我正在测试一个可靠的智能合约的网络界面。

智能合约的主要目标是添加文件（描述+哈希）并请求文件数量。

当我使用remix测试它时效果很好，所以问题在于Solidity和React之间的联系。

有帮助吗？

import React, { Component } from 'react';
import Layout from '../../components/Layout';
import { Form, Button, Input, Message } from 'semantic-ui-react'
import auction from '../../src/auction';
import web3 from '../../src/web3';

class FileNew extends Component {
  state = {
    description: '',
    hash: '',
    fileCounts: ''
  };

  async componentDidMount() {
    const manager = await auction.methods.manager().call();
    const fileCounts = await auction.methods.FileCounts().call();
    this.setState({ manager, fileCounts });
  }

  onSubmit = async (event) => {
    await auction.methods.addFile(this.setState.description, this.setState.hash);
  }

  render() {
    return (
      <Layout>
     <h1> Create new file </h1>
      <Form >
          <Form.Field>
            <label>desc</label>
            <Input label="First Name" labelPosition="right" value={this.state.description}
             onChange={event =>
               this.setState ({description: event.target.value})}
             />
             <label>hash</label>
             <Input label="Last Name" labelPosition="right" value={this.state.hash}
              onChange={event =>
                this.setState ({hash: event.target.value})}
              />
              <Button type='submit' onClick={this.onSubmit}>Submit</Button>

          </Form.Field>
          <p>The number of files is {this.state.fileCounts}</p>
        </Form>
     </Layout>
    );
  }
}
export default FileNew

Answer 1

在onSubmit组成的FileNew方法中，从this.setState以错误的方式访问其状态的属性。

使用 ...

onSubmit = async (event) => {
  try {
     await auction.methods.addFile(this.state.description, this.state.hash);
  } catch (e) {
     // Send error to Error reporting service in 
     // production/staging stage or log to console in dev.
     console.error(e);
  }

}