在使用 @loadable/component 渲染之前等待 promise

P. 尼克

我将库@loadable/component与反应路由一起使用，用于代码拆分等。

const AsyncViewItem = loadable(() => import("./modules/Items/View/View"));

<Router>
    <Switch>
        <Route exact path="/items/:item" render={(props) => <AsyncViewItem {...props} fallback={LoadingPage} />} />
    </Switch>
</Router>

在我的AsyncViewItem课堂上，我需要做出一些承诺来显示我需要的数据。

export default class View extends React.Component {
    constructor(props) {
        super(props);

        this.param = this.props.match.params.item;

        this.state = {
            chartOffers: [],
            item: []
        };
    }

    componentDidMount() {
        equipmentService.getOne(this.param)
            .then((item) => {
                offerService.getChartMonth(this.param)
                    .then((data) => {
                        this.setState({ chartOffers: data, item: item[0] });
                    })
                    .catch((error) => {
                        return console.error(error);
                    }); 
            })
            .catch((error) => {
                return console.error(error);
            })
    }

    render() {
        const item = this.state.item;
        return (<div>{item.name}</div>);
    }
}

我想知道的是如何LoadingPage在这些承诺尚未返回任何内容（或尚未设置状态值）的情况下进行回退显示？因为，在加载时，我会看到一个空的 div，这对用户体验来说不是很愉快。

蓝先生

你可以把if里面的render()功能，例如：

 render() {
        const item = this.state.item;
        if(item.length === 0) {
          return <div>loading...</div>;
        }
        return (<div>{item.name}</div>);
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。