web-dev-qa-db-fra.com

React Hooks: Pourquoi le .current est-il nul pour useRef Hook?

J'ai un exemple simple d'un composant:

function App() {
  const observed = useRef(null);
  console.log(observed.current);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Je m'attendrais à ce que observed.current serait de type element et current ne serait pas vide mais l'élément div avec toutes ses propriétés. Ma compréhension serait:

  1. La référence est initialisée avec une valeur nulle
  2. Null est écrasé par la référence

Mais il s'avère que .current reste vide. C'est mauvais car je veux passer observé à une fonction qui attend un argument de type Element.

https://codesandbox.io/embed/purple-forest-0460k

reactjsreact-hooks
21
Xen_mar

Ref.current est nul car la référence n'est définie qu'après le retour de la fonction et le rendu du contenu. Le crochet seEffect se déclenche chaque fois que la valeur du contenu du tableau qui lui est transmis change. En passant observed dans le tableau et en passant un rappel qui enregistre observed à la console, le hook useEffect peut être utilisé pour accomplir votre tâche.

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

Code Sandbox

22
Avin Kavish

Au moment où le console.log se produit, le ref n'est pas encore défini. Essayez de mettre votre console.log dans un crochet useEffect et cela fonctionne comme vous le souhaitez.

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const observed = useRef(null);

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
5
user7125259