reactjs - 如何在 React props/state 中使用 async/await promises？

Question

我正在尝试将属性动态加载到 React 组件中。这些属性在 this.props.customObjects 中使用 fetch 和 async/await 在组件结构的更高层设置。

我的 CustomObject 组件(如下)以 promise 的形式接收属性，但我无法在组件中实际显示获取的数据。我想我的组件在 promise 解决之前呈现。

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

我的组件:

export default class CustomObject extends React.Component {

    getCustomObject = (elementType) => {
        const customObject = this.props.customObjects[elementType];
        console.log('customObject', customObject);
        return customObject;
    }

    componentDidMount() {
        const customObject = this.getCustomObject(this.props.element.elementType)
        this.setState({ customObject });
    }

    render () {
        return <div className={this.props.className} style={this.props.style}>
            {this.state.customObject.name} // Gives TypeError: Cannot read property 'customObject' of null
        </div>
    }

}

控制台日志如下所示:

Answer 1

如果这是一个 promise ，你可以这样说:

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

当您在等待某事时，您需要使用 setState 来重新渲染。你应该加入回退，以防第一次调用时 render() 中的 promise 仍然悬而未决。