如何使用反复道具/状态的async / await promises？

Question

我正在尝试将属性动态加载到React组件中。使用setup在setup( name=inter.name, version=inter.version, description=inter.description, author=inter.author, options={"build_exe": options}, executables=executables ) 中设置属性，其中this.props.customObjects在组件结构中更高。

我的fetch组件（下面）以promise的形式接收属性，但实际上在组件中显示获取的数据时失败了。我想我的组件在承诺解决之前呈现。

解决这个问题的最佳方法是什么？可以在async/await中使用CustomObject的值，还是必须使用async/await？

我的组件：

props

控制台日志如下所示：

Answer 1

如果这是一个承诺，你可以说：

customObject.then((result) => {
    this.setState({customObject: result})
})

在等待某事时，您需要使用setState来重新渲染。如果第一次调用时render()中的承诺仍未处理，您应该进行备用。

Answer 2

有几种方法可以处理您的情况。其中之一是如果this.getCustomObject(...)正在返回Promise，您可以等待它解析然后设置状态。

例如

this.getCustomObject(this.props.element.elementType).then((customObject) => {
  this.setState({ customObject });
});

有关Promise的更多信息，请查看here。

如果您没有为this.state.customObject提供默认值，这将无法完全解决您的问题，因为在Promise解决之前它将被取消定义。您可以使用{this.state.customObject ? this.state.customObject.name : 'Loading..'}

之类的内容