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

您的问题：没有await范围就无法async进行某些操作，这就是您在componentDidMount中/所做的事情。如果您想在await中使用componentDidMount，请将其标记为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循环的地图使用中不起作用。

请参阅此答案Using async/await with a forEach loop

React组件异步等待其他功能

2 个答案: