RÉACTION: problèmes avec setState dans componentWillMount

Je suis un avertissement lorsque vous essayez de récupérer des données dans componentWillMount pour le rendu côté serveur:RÉACTION: problèmes avec setState dans componentWillMount

Attention: setState (...): Ne peut mettre à jour un composant de montage. Cela signifie généralement que vous avez appelé setState() en dehors de componentWillMount() sur le serveur. C'est un no-op.

voici les extraits de code:

async fetchProductsSSR() { 
    var response = await fetch(BACKEND_URL + '/products/', { 
     method: 'GET', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
    }); 

    var result = false; 
    var data = await response.json(); 
    console.log(response.status); 

    if (response.status === 200) { 
    } 
    else { 
     data = []; 
    } 
    return data; 
    } 

    async componentWillMount() { 
    if (!process.browser) { 
     var data = await this.fetchProductsSSR(); 
     this.setState({ 
     product_data: data 
     }); 
    } 
    }

Je suis sûr que les données étaient correctes avant invoquer this.setState.

si le code dur les données JSON, tout va bien

async componentWillMount() { 
    if (!process.browser) { 
    // var data = await this.fetchProductsSSR(); 

     var data = [ 
     { 
     "name": "Test", 
     } 
     ] 

     this.setState({ 
     product_data: data 
     }); 
    } 
    }

Je ne sais pas quel est le problème et vous plaît des conseils, merci.

Source

2017-10-07 winxp1981

Pourquoi ne faites-vous pas cet appel ajax dans componentDidMount? Vous devez savoir qu'il est recommandé de faire une requête ajax dans la méthode componentDidMount car this.setState rendra le composant et si vous faites la requête ajax dans componentWillMount, le composant n'est pas rendu et il n'y aura rien à mettre à jour. –

Le commentaire ci-dessus est correct mais pour résoudre votre problème, il suffit de faire le setState lorsque les données sont définies i.e 'if (data) this.setState ({product_data: data})'. Cela s'assure que vous n'essayez pas de définir une valeur indéfinie en tant qu'état –

@ Kenji, la raison pour laquelle récupérer les données dans componentWillMount est le rendu côté serveur. J'ai besoin de toute la page prête quand elle est présentée à l'utilisateur. – winxp1981

Je suis d'accord avec le commentaire de Kenji ... Vous devez faire cela dans ComponentDidMount ...

https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

et si vous voulez afficher un message de chargement, vous pouvez définir l'état de chargement et d'utiliser cette condition fonction de rendu comme ...

constructor(){ 
    this.state={loading:true} 
} 
ComponentDidMount(){ 
//do your async thing and change the state to loading:false 
} 
render(){ 
    if(this.state.loading) 
    return <YourMessage /> 

    return <Something /> 
}

Source

2017-10-07 03:38:33

RÉACTION: problèmes avec setState dans componentWillMount

Répondre

Questions connexes