javascript - 在使用 @loadable/component 渲染之前等待 Promise

Question

我正在使用库 @loadable/component与 react 路线，用于代码分割等。

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

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

在我的 AsyncViewItem 类中，我需要做出一些 promise 来显示我需要的数据。

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>);
    }
}

我想知道的是，当这些 promise 尚未返回任何内容(或尚未设置状态值)时，如何使 LoadingPage 后备显示？因为，在加载时，我会看到一个空的 div，这对于用户体验来说不是很愉快。

Answer 1

您可以将if放在render()函数中，例如:

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