我有两个模块
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
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};
我正在将 accounts
(一个承诺)函数从 contract.jsx
导出到 app.jsx
. 由于我无法从promise中返回值,因此我需要将值分配给promise中的 App
组件的状态(检查 componentDidMount
) . 为此,我需要将 accounts
函数中的'console.log(result)'替换为'this.setState({' accounts ':result})' . 但是组件和 accounts
在不同的模块中并且应该是独立的 . 我无法在 accounts
函数中设置 App
组件的状态 .
如何将promise中的值分配给 App
component中的my状态?还有其他更好的方法吗?我还可以使用一些代码更正来使我的组件更好地工作 .
1 回答
这有点hacky,但您可以尝试更改构造函数并将函数渲染为:
当
componentDidMount
函数触发时,它应该触发重新渲染 . 要存储promise返回的值,只需在contract.jsx
中执行以下操作: