问题描述
我有两个模块
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)
});
}
这篇关于如何在按钮点击承诺中实现价值反应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!