Javascript 如何从承诺结果返回React元素？

我有一个顺序数组，希望在数组中循环并调用一个异步函数来检查每个顺序，然后在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中

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

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

---

有关Promise的详细描述和示例，请参见。所有可能的副本都必须使用@JaredSmith之类的工具。您能为我的情况提供一个示例吗？这似乎是正确的答案，但如果在React render函数中调用该函数，则该函数可能无法工作。异步渲染对我们大多数人来说还不是一件事@Apolo我使用该函数将命令设置为状态，并在渲染内部使用状态，但它有时有效，有时无效。我正在使用NextJs进行服务器端渲染。这是一种竞争条件，react render在返回其标记之前不会等待承诺解决。现在，任何异步操作都应该在componentDidMount内部完成，您可能希望显示一个加载程序，直到这些操作完成