0
votes

Comment corriger: Statut ne fonctionne pas dans Gatsby?

J'utilise Gatsby pour le rendu côté serveur.

Voici mon code: P>

class BookSearch extends Component {

    state = {
        search: '',
        books: '',
    };

    componentDidMount() {
        this.loadData()
    }

    loadData () {
        axios.get('/books/list')
            .then(response => {
                this.setState({books: response.data.books});
                console.dir(response.data.books);
            })
            .catch(error => {
                this.setState({error: true});
            });
    }

reactjs gatsby

1 commentaires

Salut Pota, vérifiez ma solution et laissez-moi savoir si cela aide.

3 Réponses :

1
votes

Je pense que vous auriez dû avoir une erreur? C'est parce que vous n'avez pas initialisé l'erreur ERROR CODE>. Vous devez initialiser l'état avant de pouvoir les utiliser:

state = {
   search: '',
   books: '',
   error: false
};

0 commentaires

1
votes

Vous avez mentionné que vous utilisez SSR? Essayez d'utiliser composantwillmount dans ce cas, car composantDidMount n'est pas appelé en SSR.

Si vous utilisez la version réactive> 16.3:

Lors de la prise en charge du rendu du serveur, il est actuellement nécessaire de fournir les données synchrone - le composant-composant a été souvent utilisé à cette fin, mais le constructeur peut être utilisé comme remplacement. Les API de suspense à venir rendront la récupération de données ASYNC proprement possibles pour le rendu des clients et du serveur. Référence: HTTPS : //reactjs.org/blog/2018/03/27/update-on-async-rending.html#fetching-external-Data Dans votre cas, je pense qu'il serait plus logique d'utiliser la méthode statique GetinitialProps. ( https://nextjs.org/learn/basics / récupération-data-for-pages / récupération-batman-shows ) Si vous n'êtes pas très familier avec SSR, Next.js a de grands tutoriels: https://nextjs.org/learn/basics/geting-starté Cela peut vous aider!



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Je pense que le problème est de liant  ceci  code> à  loaddata  code> méthode. 
 Vous pouvez lier ceci de 2 façons.  p> 
 Bind  ceci  code> dans le constructeur,  li>
 ol>  xxx  pré> 
 ou vous pouvez simplement utiliser la fonction de flèche,  li>
 OL> loadData = () => { //Arrow function auto binds `this`
   axios.get('/books/list')
   .then(response => {
        this.setState({
           books: response.data.books
        }); 
        console.dir(response.data.books);
   })
   .catch(error => {
      this.setState({error: true});
   });
}

                                

                                                                    
                                    
                                    
                                        0 commentaires