时间戳

首页 > 解决方案 > 反应中的异步红化

javascript - 反应中的异步红化

问题描述

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

所以我有渲染方法

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

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

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

关于如何在渲染中获取此异步数据的任何想法？？？

标签： javascriptreactjsasynchronous

解决方案

为此，您必须使用您的state. 安装组件后，您可以调用该函数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/>
}

推荐阅读