Comment rendre les données dans react en obtenant un état indéfini ?

Question

Je suis en train de récupérer des données à l'intérieur de componentDidMount mais j'obtiens undefined pendant le rendu initial et un nouveau rendu se produit et pendant ce temps la variable d'état est remplie. Maintenant, quand elle n'est pas indéfinie et après le remplissage, je veux la déstructurer et afficher les données dans mon composant.

Note : getProjectDetails() fait une req GET pour remplir les données.

J'obtiens un nom d'erreur de type non défini.

  constructor(props) {
            super(props);
            this.state = {
               projectDetails: ''
            };
        }

    componentDidMount() {
            getProjectDetails(this.props.logged_in_user, this.props.projectId)
                .then( res => {
                    this.setState({projectDetails: res});
                })
                .catch(err => {
                    console.log('Error: ' + err);
                })
        }

    //Inside render()

    render() {
            console.log('Project details from API endpoint: ', this.state.projectDetails.project)

            const { projectDetails } = this.state;
            console.log('Destructure: ', projectDetails);

            const project = this.state.projectDetails.project;

    let {  
                name,
                location,
                city,
                builder_name } = project;

Answer 1

Vous pouvez vérifier avec les éléments suivants si l'état est défini :

render() {
    if(this.state.projectDetails === ''){
        return <div>Loading</div>;
    }
    else{
        return <div>{this.state.projectDetails.project}</div>
    }
}

Donc tant que l'état est faux, Loading sera retourné, s'il y a une valeur, alors this.state.projectDetails.project est renvoyé. J'espère que cela vous aidera.

Edit : La méthode render sera appelée deux fois, avant que les données ne soient récupérées et ensuite, après que l'état soit défini. Ainsi, cette méthode ne renverra les données que si elles sont réellement définies.