reactjs - 如何访问 web3 范围之外的功能？

Question

我正在构建一个 react-web3 应用程序。

如何在 web3 方法中访问 this.setState 等超出范围的方法？

componentDidMount() {
    var events = contractInstance.allEvents({fromBlock: 0, toBlock: 'latest'});
        events.watch(function(error, result){
            this.setState({result: result})
        });
    }
}

TypeError：无法读取未定义的属性“setState”

我可以使用过滤方法（web3.eth.filter()）轻松做到这一点，但不能使用事件

Answer 1

您可以使用箭头函数作为回调：

   events.watch((error, result)=>{
        this.setState({result: result})
    });

对于所有箭头函数，'this' 将在封闭上下文中采用与 'this' 相同的值。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

请注意，如果您直接在 componentDidMount() 或 componentWillMount() 的上下文中执行 setState，它完美运行。在那些地方，'this' 指的是您的组件对象，正如您所期望的那样。但是一旦你定义了一个回调函数，这个函数中'this'的值可能会根据你的回调的使用方式而改变。因此，要强制回调中“this”的值成为您想要的值，您可以使用前面提到的箭头函数。因为对于所有箭头函数，'this' 将在封闭上下文中采用与 'this' 相同的值。

或者，您可以使用绑定：

   events.watch(function(error, result){
       this.setState({result: result})
   }.bind(this));