如何在按钮点击承诺中实现价值反应？ [英] How to render value in promises on button click in react?

问题描述

我有两个模块

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {accounts} from './contract.jsx';


class App extends React.Component{
    constructor(props){
    super(props);
    this.state={'text':'','accounts':'','clicked':false};
}
componentDidMount = () => {
    this.setState({'accounts':accounts()});
}
buttonAction = (e) => {
    this.setState({'clicked':true});
}
render(){
    return(
    <div align="center">
    <Button name="get all Accounts" action={this.buttonAction}/>
    {this.state.clicked ? <div>{this.state.accounts}</div> : null}
    </div>
    )}
}


const Button = (props) =>
    (<button onClick={props.action}>{props.name}</button>);

ReactDOM.render(<App/>,document.getElementById('root'));

和contract.jsx

and contract.jsx

import Web3 from 'web3';
var web3 = new Web3(Web3.givenProvider || 'http://localhost:8545');

let accounts = () => {
    // this is a promise
    web3.eth.getAccounts().then(function(result){console.log(result);})
    .catch(function(error){console.log(error.message)})
}
export {accounts};

我正在导出个帐户（一个承诺）函数从 contract.jsx 到 app.jsx 。由于我无法从承诺中返回值，因此需要将值分配给承诺中 App 组件的状态（请检查 componentDidMount ）。为此，我需要将 accounts 函数中的 console.log（result）替换为 this.setState（{'accounts：result}）。但是组件和帐户在不同的模块中，应该是独立的。我无法在我的帐户函数内设置 App 组件的状态。

I'm exporting accounts(a promise) function from contract.jsx to app.jsx. Since I can't return value from a promise, I need to assign the value to the state of App component inside the promise (check componentDidMount ). For that, I need to replace 'console.log(result)' in accounts function to 'this.setState({'accounts':result})'. But the component and accounts are in different modules and supposed to be independent. I cannot set the state of the App component inside my accounts function.

如何在 App 组件中将承诺中的值分配给我的州？还有其他更好的方法吗？我还可以使用一些代码更正来使我的组件更好地工作。

How can I assign the value from the promise to my state inside App component? Is there any other better way to do it? I could also use some code corrections to make my component work better.

推荐答案

这有点hacky，但是您可以尝试将构造函数和呈现函数更改为：

This is a little hacky, but you could try changing your constructor and render functions to:

constructor(props) {
  super(props);
  this.state = {
    'text': '',
    'accounts': null,
    'clicked': false
  };
}

...

render() {
  return(
    <div>
      { this.state['accounts'] ? (
          <div align="center">
            <Button name="get all Accounts" action={this.buttonAction}/>
            {this.state.clicked ? <div>{this.state.accounts}</div>:null}
          </div>
        ) : null 
      }
    </div>
  )
}

当 componentDidMount 函数确实会触发应重新渲染的事件。要存储诺言返回的值，只需在 contract.jsx 中执行以下操作：

When the componentDidMount function does fire it should trigger a re-render. To store the value returned by the promise simply do the following in contract.jsx:

let accounts = () => {
  return web3.eth.getAccounts()
    .then( function(result) {
      return result; // Or it could be result.data, it depends
    }).catch( function(error) {
      console.error(error.message)
    });
}

这篇关于如何在按钮点击承诺中实现价值反应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！