从 this.props 渲染 React promise

Question

我是 React 和所有这些承诺的新手。 因此，我正在努力在组件中渲染基于 promise 的道具。

基本上我有一个包含所有逻辑和所需的 API 调用的组件。 在 Render 中，我提供了一个按钮来显示和隐藏模态 window 以显示一些内容。 内容通过多个返回承诺的 API 调用获取 -> 它们作为承诺数组存储在 state 中。

模态 window 是另一个组件，我将 state 作为道具传递给它。 在 render 方法中 I.map 数组从 this.props 变成 <Text> 项。

不幸的是，这会导致错误：

错误：对象作为 React 子项无效（找到：object，键为 {_U, _V, _W, _X}）。 如果您打算渲染子集合，请改用数组。

据我了解这个错误，反应试图呈现 Promise object 本身，而不是父组件中 API 调用的结果。

我如何渲染将道具传递给组件的 promise？

我在 codesandbox 上创建了一个示例来模拟我正在尝试做的事情： https://codesandbox.io/s/crazy-microservice-fcgoy?file=/src/modal_component.js

Answer 1

您必须处理返回的 promise，如下所示：

buttonOnClick() {
    const ids = [1, 2, 3, 4, 5];
    const resolvedNamesPromises = ids.map((element) => {
        // resolveName returns a promise  
        return this.resolveName(element);
    });

    Promise.all(resolvedNamesPromises).then(names => {
        this.setState({
            modal: {
                 show: true,
                 names
            }
        });
    });
  }

我建议通过阅读此处了解更多关于承诺的信息。 这里还有Promise.all参考文档。