Ceci est le code actuel, lorsque je charge la page de liste, pendant un moment, il dit "Aucun élément de liste trouvé", il charge ensuite les éléments de l'API backend et affiche ces éléments (le message ci-dessus disparaît)

import React, { Component } from 'react';

class List extends Component {

    // Initialize the state
    constructor(props){
        super(props);
        this.state = {
            list: [],
            isFetchedFromServer:false
        }
    }

    // Fetch the list on first mount
    componentDidMount() {
        this.getList();
    }

    // Retrieves the list of items from the Express app
    getList = () => {
        fetch('/api/getList')
            .then(res => res.json())
            .then(list => this.setState({ list }))
            .then(this.state.isFetchedFromServer= true)
    }

    render() {
        const { list } = this.state;

        return (
            <div className="App">
            <h1>List of Items</h1>
        {/* Check to see if any items are found*/}
        {list.length ? (
            <div>
            {/* Render the list of items */}
            {list.map((item) => {
                    return(
                        <div>
                        {item}
                        </div>
                );
                })}
            </div>
        ) : (
        <div className={((this.state.list != undefined) &&( this.state.list != null)) ? '' : 'hidden'}>
        <h2>No List Items Found</h2>
        </div>
        )
        }
    </div>
    );
    }
}

export default List;

Je souhaite ne voir aucun élément de liste trouvé lorsqu'il est revenu de l'appel principal vide.

Veuillez m'aider à le faire.

0
Eshan I. 8 nov. 2019 à 10:01

4 réponses

Meilleure réponse

Déclarez un indicateur et mettez-le à jour une fois la récupération terminée.

this.isShowMessage: false;

componentDidMount() {
        this.getList();
        this.isShowMessage: (this.state.list == null);
    }

Et cachez votre div en conséquence.

<div>
   {(this.isShowMessage) && <h2>No List Items Found</h2>}
</div>
1
Koga 8 nov. 2019 à 08:01

Ce à quoi vous êtes confronté est tout à fait correct. Cela se produit car votre application peut prendre un peu de temps pour obtenir une réponse de l'API.

Donc, jusqu'à ce qu'il y ait une réponse, la longueur de this.state.list sera 0. Jusqu'à ce que

Aucun élément de liste trouvé

Vous pouvez annuler la déclaration juste pour la montrer.

J'espère que cela t'aides!

0
Vivek V Nair 8 nov. 2019 à 07:09

Ce qui vous manque, c'est un indicateur booléen «isLoading» dans l'état du composant.

Dans votre componentDidMount, définissez-le sur true. Lorsque votre extraction est terminée, définissez-la sur false.

Ensuite, affichez uniquement «Aucun élément de liste trouvé». si isLoading est faux et que la liste est vide.

0
pteranobyte 8 nov. 2019 à 07:10

Comme l'API est un appel asynchrone, il indique initialement que la liste est vide et après la réponse, la liste est remplie d'objets. Vous devrez peut-être ajouter un booléen APIProcessing dans l'état dont la valeur initiale est true pendant que les objets sont toujours récupérés dans la base de données. Après cela, vous devez définir la valeur false et afficher la liste

0
User965207 8 nov. 2019 à 07:09