javascript - 如何从 Promise 结果返回 React 元素？

Question

我有一个订单数组，想要在数组内循环并调用异步函数来检查每个订单，然后在 dom.dow 内渲染数组是我的代码

我尝试在映射之外创建一个数组并将有效订单推送到该数组，但是当我记录该数组时其为空

renderTrades = () => {
    const { trades } = this.props;
    const contractWrappers = new ContractWrappers(web3Wrapper._provider, { networkId: KOVAN_NETWORK_ID });
    const _trade = [];
    trades.map((trade, index) => {
        contractWrappers.exchange.getOrderInfoAsync(trade.order)
            .then((val) => {
                if (val.orderStatus == 5) {
                    _trade.push(<TradeRow0x key={index} />);
                }
            });
    });
    return _trade;
};

我想将有效的订单推送到数组并将其渲染到 dom

Answer 1

可以使用 Promise.all() 来实现，在返回所需的 JSX 之前等待所有 promise 得到解决。

// map all of your trades to promises
const tradesPromises = trades.map(trade => contractWrappers.exchange.getOrderInfoAsync(trade.order))

Promise.all(tradesPromises).then(res => {
  // all of your promises have now resolved, so you can return your jsx as required.
  const mappedTrades = res.map((value, index) => {
    return value.orderStatus === 5 ? <TradeRow key={index} /> : null
  })

  // now you will be able to log these out and see what you are 
  // expecting as the promises will all have resolved.
  console.log(mappedTrades);
})

参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all有关 Promise.all

的深入描述和示例