Question

我目前有一个名为resetThenSet的函数，

resetThenSet = (id, arrayId, title) => {
  let size = [...this.state[arrayId]]
  blah blah blah
}

从我的渲染方法中调用此resetthenSet方法，如下所示：

        <Dropdown
          title="Size"
          arrayId="selectProduct"
          list={this.state.selectProduct}
          resetThenSet={this.resetThenSet}
        />

一切正常。我需要使用async才能在其中等待另一个方法。所以我将resetThenset切换为此：

async resetThenSet(id, arrayId, title){
  let size = [...this.state[arrayId]]
  //blah blah blah
}

这使我的控制台出现错误。

Invalid argument passed as callback. Expected a function. Instead received: [object Promise]

这似乎与作用域有关，所以我认为我将为其添加绑定：

this.resetThenSet = resetThenSet.bind(this);

这给了我错误

resetThenSet is not defined

是否有一种简单的方法可以将胖箭头功能更改为React中的异步功能？

我检查了一下，但没有帮助： How can I use async/await in a es6 javascript class?

Answer 1

class youDidntTellUs extends Component {

async resetThenSet(id, arrayId, title){
let size = [...this.state[arrayId]]
  //blah blah blah
}

render(){
return (
  <Dropdown
      title="Size"
      arrayId="selectProduct"
      list={this.state.selectProduct}
      resetThenSet={() => this.resetThenSet()}
    />
...

Answer 2

this.resetThenSet = this.resetThenSet.bind(this);

尝试此操作，因为您已绑定到未声明的函数。这就是为什么它会引发错误

您可以阅读有关“为什么将功能绑定到此”的更多信息 https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb

在类中反应js异步函数

2 个答案: