Блог

Я новичок в ReactJS и Solidity. Я тестирую веб-интерфейс интеллектуального контракта 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
  

В 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);
  }

}