从一个组件到另一个组件使用异步功能

如何解决从一个组件到另一个组件使用异步功能

我正在使用松露中的react boxe对Dapp进行编码。对于该应用程序，我需要在除App.js之外的其他组件中使用智能合约中的函数（仅两个getter）。此功能为getUser，其格式必须为Login.js。

App.js：

class App extends Component {
  state = {
    web3: null,contract: undefined,account: null,user: {
      id: null,name: '',password: ''
    }
  };

  componentDidMount = async () => {
    try {
      const web3 = await getWeb3();
      const accounts = await web3.eth.getAccounts();
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = Login.networks[networkId];
      const instance = new web3.eth.Contract(
        Login.abi,deployedNetwork && deployedNetwork.address,);
      this.setState({ web3,accounts,contract: instance });
    } catch (error) {
      alert(
        `Failed to load web3,or contract.       
         Check console for details.`,);
      console.error(error);
    }
  };

  getUser = async (event) => {
    const userID = this.state.id;
    const userName = await this.state.contract.methods 
                     .getUsername(userID).call();
    const userPassword = await this.state.contract.methods 
                        .getPassword(userID).call();
    console.log(userName + ' - ' +userPassword);
  };

  render() {
    if (!this.state.web3) {
      return <div>Loading Web3,and contract...</div>;
    }
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

Login.js：

class App extends Component{

  handleInputChange = (event) => {
    let input = event.target;
    let name = event.target.name;
    let value = input.value;
    this.setState({
      [name]: value
    })
  }
render() {
    return (
      <div className='Login'>
        <form>
          <label>
            <span>Barcode:</span>
            <input name="id" type="number" required    
                   onChange={this.handleInputChange} />
          </label>
          <button type="submit" value="submit">Get user data</button>
        </form>
      </div>
    );
  }
}

export default Login;

我首先尝试导出getUser函数：

App.js：

export const getUser = async (event) => {
        const userID = this.state.id;
        const userName = await this.state.contract.methods 
                         .getUsername(userID).call();
        const userPassword = await this.state.contract.methods 
                            .getPassword(userID).call();
        console.log(userName + ' - ' +userPassword);
      };

Login.js：

import {getUser} from ...

但是我遇到了以下错误：

Unhandled Rejection (TypeError): Cannot read property 'state' of undefined

然后我尝试在Login内添加相同的componentDidMount 和state在App.js内部（包含导入项），但是我得到了 以下错误：

TypeError: Cannot read property 'methods' of null

我对如何操作一无所知。所以我想请一些帮助。

我先感谢任何愿意花时间帮助我的人。

解决方法

您只需要在组件之间传递值。假设onClick您将从登录名移至应用程序组件，并传递ID和名称。

onClick=(id,name)=>{
  history.push({
           pathname: '/secondpage',//app component url
           state: { id: id,name: name }
       })
}

历史可以从react-router导入

然后在应用程序组件中，您可以在this.props.location.state

中访问此值

如果要通过组件发送值，请在登录组件中声明这样的应用程序组件，

<App 
  id={id}
  name={name}
/> 

然后在应用程序组件中，您可以在this.props

中获取值 ,

全球状态管理

您正在寻找一种在全局级别上管理状态的方法。对于这个问题，存在许多解决方案，并且被广泛使用。

解决方案1：道具或“道具钻探”

想法是将状态传递给需要它的每个组件。仅当传递非全局级别的道具或仅由少数组件树所需的道具时，才应考虑这样做。

在官方文档（https://reactjs.org/docs/context.html）中有一个传递道具的例子

解决方案2：React Context API

React内部已经有一个内置功能，可以广泛使用它称为Context API来解决此问题。使用示例也在文档中。 https://reactjs.org/docs/context.html

上下文提供了一种通过组件树传递数据的方法，而不必 在每个级别手动传递道具。

TLDR; ：如果您需要处于全局状态，其中许多组件树需要访问它，那么这可能是解决方案。