javascript - 在 React 中使用 async/await 不正确地更新状态

Question

我的目标是通过在 componentDidMount 中调用我的 _addStock() 函数来添加新股票 - 其中包含报价、图表、元信息到组件状态下各自的数组中。然而，在循环并调用 _addStock 后，我在每个数组中只有 1 只股票。

我可以通过在每个 _addStock 调用之间通过 setTimeouts 添加延迟来实现此功能 - 但这违背了 promise 的目的。

我认为通过 async/await，JavaScript 会“同步”执行代码。但是，当我多次调用 _addStock 时，setState 似乎只被调用一次。

发生什么事了？

_fetchMeta、_fetchQuote、...等返回 promise 。

...

// this is what my state ends up looking like, only 1 per key when I'm expecting 4.
this.state = {
    stocks: [
        {
            symbol: 'MSFT',
            display: '...',
            color: '...'
        }
    ],
    metas: [
        {
            symbol: 'MSFT',
            name: '...',
            description: '...'
        }
    ],
    quotes: [
        {
            symbol: 'MSFT',
            price: '...',
            change: '...'
        }
    ],
    charts: [
        {
            symbol: 'MSFT',
            data: "..."
        }
    ]
}

//...

_addStock = async symbol => {
    const { metas, quotes, charts, stocks } = this.state;

    // check if stock already exists
    const hasStock = stocks.filter(s => s.symbol === symbol).length;
    if (hasStock) {
        return;
    }

    const meta = await this._fetchMeta(symbol);
    const quote = await this._fetchQuote(symbol);
    const chart = await this._fetchChart(symbol);
    const stock = {
        symbol: symbol.toUpperCase(),
        color: setStockColor(),
        display: true
    };

    this.setState({
        ...this.state,
        metas: [...metas, meta],
        quotes: [...quotes, quote],
        charts: [...charts, chart],
        stocks: [...stocks, stock]
    });
};

//...

componentDidMount() {
    const initStocks = ["FB", "MSFT", "NVDA", "AAPL"];
    initStocks.forEach(s => this._addStock(s));
}

Answer 1

用于使用 Promise.all 并行获取多个 URL 。您的情况的大致实现是:

_addStock = async symbol => {
    ...
    let fetchMeta = this._fetchMeta.resolve(symbol);
    let fetchQuote = this._fetchQuote.resolve(symbol);
    let fetchMeta = this._fetchChart.resolve(symbol);

    let data = await Promise.all([
      fetchMeta,
      fetchQuote,
      fetchChart,
    ]).then((data) => {
      console.log(data); 
      // Inspect your data here setState accordingly        
      this.setState({ ... });    
    });        
};