2017-10-17 5 views
1

J'essaye d'utiliser le deuxième paramètre de setState pour passer une fonction de rappel, mais il semble (d'après ce que je peux rassembler) que le moteur de rendu côté serveur ignore complètement ce paramètre. J'utilise Gatsby qui utilise le rendu côté serveur pour créer un site basé sur React statique. Mon appel est un gestionnaire onChange, et ressemble à ceci:React serveur side renderer omet fonction de rappel setState?

this.setState({ [event.target.name]: event.target.value },() => { console.log('setState callback') }) 

L'état est mis à jour comme prévu, mais le rappel est jamais appelé. Remarque: Le même problème s'applique si je transmets un objet ou une fonction pour le premier paramètre. La fonction composante ressemble à ceci:

ReactComponent.prototype.setState = function (partialState, callback) { 
    [...] 
    this.updater.enqueueSetState(this, partialState, callback, 'setState'); 
}; 

méthode de cette Updater, qui vit à ReactUpdateQueue.js (selon la pile d'appel) ressemble à ceci:

enqueueSetState: function (publicInstance, partialState) 

Je ne comprends pas pleinement la construire le processus pour React, mais je crois que la méthode/fichier provient de this fichier dans la source:

/src/renderers/shared/server/ReactPartialRenderer.js 

Le seul autre endroit où je peux trouver cette fonction définie est here:

/src/isomorphic/modern/class/ReactNoopUpdateQueue.js 

enqueueSetState: function(
    publicInstance, 
    partialState, 
    callback, 
    callerName, 
) { 
    warnNoop(publicInstance, 'setState'); 
} 

qui ressemble à la signature de la méthode correcte, mais ne figure nulle part dans la pile d'appel lorsque je déboguer l'appel setState dans mon code. Cela ne semble pas être un problème avec les composants React rendus côté client (je vais essayer de mettre en place un simple repo pour montrer ce problème, mais il ne semble pas réplicable sur CodePen etc.) Je sais que je pourrais utiliser componentDidUpdate pour accomplir ce que j'ai besoin de faire, mais le rappel est beaucoup plus pratique dans mon cas, et je déteste laisser un mystère comme celui-ci non résolu. :)

Répondre

1

Eh bien, je l'ai compris, et s'avère, comme c'est trop souvent le cas, c'était une erreur auto-infligée. L'installation par défaut de Gatsby utilise React v15 mais nous voulions utiliser 16, nous avons donc ajouté une dépendance directe dans package.json, qui a été intégrée dans le paquet résultant. Je ne comprends toujours pas pourquoi la version mentionnée ci-dessus de enqueueSetState a été appelée au lieu de la bonne, mais en supprimant la référence pour réagir (et en ajoutant gatsby-plugin-react-next, ce qui fait ce que nous voulons simplement en pointant webpack vers la version plus récente) .

Au moins, c'était une bonne excuse pour se familiariser un peu avec le courage de React. Peut-être que cela sauvera quelqu'un d'autre dans le futur.