Choisir un React Hook adapté à une utilisation avec l'instantané de Firestore
P粉555682718
2023-08-24 13:48:51
<p>J'utilise beaucoup les instantanés Firestore dans mon application React Native. J'ai également utilisé des hooks React. Le code ressemble à ceci : </p>
<pre class="brush:php;toolbar:false;">useEffect(() => {
someFirestoreAPICall().onSnapshot(snapshot => {
// Lors du chargement initial du composant, ajoutez toutes les données chargées à l'état.
// Lorsque les données sur Firestore changent, nous recevons des mises à jour dans ce rappel,
// Puis mettez à jour l'interface utilisateur en fonction de l'état actuel
});;
}, []);</pre>
<p>Au début, je pensais que <code>useState</code> était le meilleur crochet pour stocker et mettre à jour l'interface utilisateur. Cependant, selon les paramètres de mon hook <code>useEffect</code>, qui est fourni avec un tableau de dépendances vide, lorsque le rappel d'instantané est déclenché et que j'essaie de modifier l'état actuel avec de nouvelles modifications, l'état actuel n'est pas défini. . Je pense que cela est dû aux fermetures. J'ai pu résoudre ce problème en utilisant <code>useRef</code> et <code>forceUpdate()</code>
<pre class="brush:php;toolbar:false;">const dataRef = useRef(initialData);
const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);
useEffect(() => {
someFirestoreAPICall().onSnapshot(snapshot => {
// Si des données d'instantané sont ajoutées
dataRef.current.push(newData)
Forcer la mise à jour()
//Si les données de l'instantané sont mises à jour
dataRef.current.find(e => certaines conditions) = updateData
Forcer la mise à jour()
});;
}, []);
retour(
// JSX utilisant dataRef.current
)</pré>
<p>Ma question est la suivante : est-ce que j'utilise correctement <code>useRef</code> et <code>forceUpdate</code> différemment de <code>useState</code> J'ai l'impression que mettre à jour le hook <code>useRef</code> et appeler <code>forceUpdate()</code> En essayant d'utiliser <code>useState</code>, j'ai essayé d'ajouter la variable d'état au tableau de dépendances, mais cela a entraîné une boucle infinie. Je souhaite initialiser la fonction d'instantané une seule fois et souhaite que les données avec état du composant soient mises à jour au fil du temps à mesure que le backend change (déclenché dans le rappel onSnapshot). </p>
Ce sera mieux si vous combinez useEffect et useState. useEffect est responsable de la configuration et de la désactivation de l'écouteur, et useState est uniquement responsable des données dont vous avez besoin.
Ensuite, vous pouvez référencer directement les "données" dans le hook useState de votre application.
Un simple useEffect a fonctionné pour moi, je n'ai pas besoin de créer une fonction d'assistance ou quoi que ce soit du genre,
Un simple useEffect fonctionne pour moi, je n'ai pas besoin de créer de fonctions d'assistance ou quelque chose comme ça,