Reactjs 路線在所有情況下都顯示加載微調器

Question

在我的小型應用程序中，我有一些路線，當我更改路徑時，會加載適當的組件。 但問題是 - 我在我的 ProductsPage 容器中加載微調器，我等待來自 db 的響應，當它等待時我顯示微調器，當我更改到籃子的路線時，它顯示無限微調器，但我在籃子組件中沒有微調器

 render() {
    return (
        <div>
            <Layout>
                <Route path="/" exact component={MainPage}/>
                <Route path="/:category" component={ProductsPage}/>
                <Route path="/basket" component={Basket}/>
            </Layout>
        </div>
    );
}

這是我的產品組件

render() {
    let products;
    let description = null;

    if (this.state.categorizedItems && this.state.productsDescription) {
        products = (
            <div className={classes.Products}>
                {
                    this.state.categorizedItems.map(item => (
                        <Product
                            addedProduct={this.addProductHandler}
                            key={item.id}
                            title={item.title}
                            backgroundImage={item.backgroundLink}
                        />
                    ))
                }
                <ItemsAlignment/>
            </div>
        );
        description = (
            <div className={classes.Description}>
                {this.state.productsDescription}
            </div>
        )
    } else {
        products = (<><Spinner/></>)
    }

    return (
        <>
            <div className={classes.ProductsWrapper}>
                <span className={classes.ProductsTitle}>
                    {this.state.productsTitle}
                </span>
                <>
                    {description}
                    {products}
                </>
            </div>
        </>
    )
}

Answer 1

您只需要在服務器響應后關閉微調器並且在將路由更改為“籃子”之前