时间戳

首页 > 解决方案 > 从 this.props 渲染 React 承诺

javascript - 从 this.props 渲染 React 承诺

问题描述

我是 React 的新手，所有这些都承诺。因此，我正在努力在组件中呈现基于 Promise 的道具。

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

模态窗口是另一个组件，我将状态作为道具传递给它。在渲染方法中，我将 this.props 中的数组映射到 <Text> 项中。

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

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

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

如何呈现将道具传递给组件的承诺？

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

标签： javascriptreactjsreact-native

解决方案

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

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 的信息。这里还有Promise.all参考文档。

推荐阅读