Question

在我的一个组件中，我有以下功能：

addNewIndicator(attrs = {}) {
  const value = attrs.value || 'Indicator'
  const type = attrs.type || 'Generic Type'

  this.createIndicator(value).then(
    console.log('Indicator Created.')
  )
}

async createIndicator(value) {
  await this.props.createIndicatorMutation({
    variables: {
      value
    },
    update: (store, { data: { indicator }} ) => {
      const data = store.readQuery({ query: INDICATOR_FEED_QUERY })
      data.indicatorFeed.splice(0, 0, indicator)
      store.writeQuery({
        query: INDICATOR_FEED_QUERY,
        data,
      })
    }
  })
}

单击按钮时会触发

addNewIndicator()。运行时，我收到以下错误：

TypeError：this.createIndicator不是函数

指向这一行：

this.createIndicator(value).then(

我已经做了很多谷歌搜索，但是还没有弄清楚为什么会这样。我的理解是异步函数可以这样调用，但也许我错过了一些东西。对不起，如果这是一个愚蠢的问题，我还在学习React！

此外，我使用create-react-app创建了该项目，除了添加一些软件包之外，还没有修改它。谢谢你的帮助！

编辑以添加调用方式。它是从子组件props调用的：

<Button primary onClick={this.handleAddSelectionClick}>Add Selected As Indicator</Button>

和handleAddSelectionClick：

handleAddSelectionClick = () => {
  ...snip...
  this.props.addNewIndicator({
    value: new_indicator_str,
  })
}

Answer 1

尝试使用相同的上下文（this）验证您的2个方法 - 你可能需要在构造函数中做类似的事情：

this.addNewIndicator = this.addNewIndicator.bind(this);
this.createIndicator = this.createIndicator.bind(this);

Answer 2

你可能只是忘了绑定“这个”。当您将addNewIndicator作为回调传递时，它会丢失其上下文。在本文中，描述了几种绑定回调的方法，每种方法各有利弊。 https://reactjs.org/docs/handling-events.html

React async函数不是函数

2 个答案: