Question

我将库@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，这对于用户体验来说不是很令人满意。

Answer 1

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

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

等待承诺，然后再使用@ loadable / component

1 个答案: