javascript - React 中的异步渲染

Question

我遇到一个问题，我的一个组件必须等待在渲染时获取一些数据，但我找不到一种方法来做到这一点。

所以我有渲染方法

render() {
    const getComponentProps = async () => {
                return await this.props.Store.getComponentProperties(id);
            };
    componentProps = getComponentProps(id);

    return <MyComponent
        .
        .
        data={componentProps}/>;
}

问题是我的组件在获取数据之前渲染。我无法让整个渲染等待，我还尝试将 componentProps 设置为一个状态，希望它准备好后会重新渲染，但这也不起作用。最后我尝试了新的 React 版本中的新 Suspense/Lazy 功能，但这也不起作用。我正在获取的数据正在对我的数据库进行 REST 调用，我必须等待它。此外，渲染它映射到一系列组件，而不仅仅是一个组件，并且每个组件都必须获取其属性并加载它们。

关于如何在渲染中进行异步数据获取的任何想法???

Answer 1

要实现此目的，您必须使用您的状态。当你的组件被挂载后，你可以调用函数setState并等待你的数据被获取。获取数据后，您的组件将使用正确的数据重新渲染:

class MyComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: null
        }
    }

    componentDidMount = async() => {
        this.setState({ data: await this.props.Store.getComponentProperties(id) })
    }

    render() {
        return <MyComponent2 data={this.state.data} />;
    }
}

如果您不希望子组件接收空数据，您可以选择在未获取数据时不渲染它:

render() {
    return this.state.data ? <MyComponent data={this.state.data} /> : <div/>
}