javascript - 在其他函数中响应组件异步等待

Question

关于异步等待的简单问题，有很多使用异步等待与 React 的示例，但我很难让它工作。

componentDidMount = () => {

    const cards = mockCards;

    this.setState(
        {
            loading: false,
            cointrackerCards: [
                ...cards.map(
                    card => {
                        const price = await this.getCurrentSellPrice(card.coin, card.valuta, card.amount[card.coin])
                        return {
                            ...card, 
                            currentSellPrice: price
                        }
                    }
                )
            ]
        }
    )

}

getCurrentSellPrice = async (coinType, valuta, amount) => {
    //console.log(coinType, valuta, amount)
    try {
        const result = await coinbaseAPI.get('/prices/BCH-EUR/sell')
        //console.log(result.data.data)
        return result.data.data.amount
    }
    catch (err) {
        console.log('[ERRORHANDLER]', err)
    }
}

上面的代码抛出错误:语法错误:await是保留字(71:42)直接调用currentSellPrice键中的函数，也不起作用，因为它返回一个 Promise。我做错了什么？

Answer 1

你的问题:你不能在没有async作用域的情况下await某些东西，这就是你在/使用componentDidMount所做的事情。如果您想在 componentDidMount 中使用 await，请将其标记为 async。这是一个说明其工作原理的示例:

class AsyncState extends React.Component {
  state = {
    flag: false
  }

  async componentDidMount(){
    const flag = await this.changeFlagAsync();
    this.setState({flag})
  }

  async changeFlagAsync(){
    return new Promise((resolve, reject) => { // simulate async
      setTimeout(() => resolve(true), 2000)
    })
  }

  render() {
    return <div>
      {this.state.flag && <div>Done after 2 sec</div> || <div>Waiting for promise</div>}
    </div>;
  }
}

还有working fiddle