React组件异步等待其他功能

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)
    }
}

上面的代码引发错误： Syntax error: await is a reserved word (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

Answer 2

首先要犯两个错误，就是您没有为函数分配async关键字。 在cards.map上。

无论如何，我猜想它即使在这里写也不会起作用，因为异步等待在用于in，for或传统for循环的映射中不起作用。

请参阅此答案通过forEach循环使用async / await