9
votes

Comment effectuer un rendu lorsque les références changent

Code:

import DrawControl from "react-mapbox-gl-draw";

export default function MapboxGLMap() {
    let drawControl = null
    return(
      <DrawControl ref={DrawControl => {drawControl = DrawControl}}/>
    )
}

Je veux charger des données lorsque le drawControl n'est pas nul. Je vérifie le document qui peut utiliser la référence de rappel.

Alors, comment écouter les modifications de drawControl et charger les données?

javascript reactjs ref

1 commentaires

Avez-vous besoin de refaire le rendu lorsque ref est mis à jour, ou est-ce suffisant pour utiliser useRef ? La façon dont vous le faites, vous ne stockez en aucun cas la référence. Vous devez soit utiliser un hook pour le stocker, un composant de classe ou un objet en dehors du composant (par exemple un magasin).

3 Réponses :

12
votes

Si vous souhaitez déclencher un nouveau rendu après les modifications de la référence, vous devez utiliser useState au lieu de useRef . Ce n'est qu'ainsi que vous pouvez vous assurer que le composant sera à nouveau rendu. Par exemple:

function Component() {
  const [ref, setRef] = useState();

  return <div ref={newRef => setRef(newRef)} />
}

Comme décrit dans la documentation useRef :

Gardez à l'esprit que useRef ne vous avertit pas lorsque son contenu change. Le muter .current propriété doesnâ € ™ t la cause d' un nouveau rendu. Si vous souhaitez exécuter du code lorsque React attache ou détache une référence à un nœud DOM, vous pouvez utiliser une référence de rappel à la place.

Il peut parfois être préférable de stocker la valeur que vous obtenez du nœud DOM, comme suggéré ici , au lieu de stocker le nœud lui-même.

3 commentaires

Merci pour vos conseils, j'ai essayé votre code, mais il se répète tout le temps. J'ai besoin de refaire le rendu lorsque ref est mis à jour. Je pense que la référence de rappel peut m'aider. Mais je ne sais pas comment faire

Merci, j'utilise la référence de rappel pour résoudre mon problème.

@YangYun, pouvez-vous reproduire la boucle de re-rendu dans un codeandbox? J'ai essayé, mais ça n'arrive pas ici .

2
votes

useCallback pourrait écouter la ref modifiée

export default function MapboxGLMap() {
    const drawControlRef = useCallback(node => {
      if (node !== null) {
        //fetch(...)   load data
      }
    },[]);

    return(
      <DrawControl ref={drawControlRef }/>
    )
}

1 commentaires

A parfaitement fonctionné pour moi

-2
votes

Vous pouvez utiliser une fonction de rappel qui useEffect sur le changement de useRef

   function useEffectOnce(cb) {

        const didRun = useRef(false);
        useEffect(() => {
            if(!didRun.current) {
                cb();
                didRun.current = true
            }
        })
    }

0 commentaires