Pourquoi les événements Native DOM réinitialisent-ils toujours l'état des composants React ?

Question

Je sais que la Événement synthétique au lieu de la Événement du domaine indigène Je pense que l'interaction avec React App devrait être gérée de cette manière, mais je me demande pourquoi le comportement est si bizarre. Lorsque l'événement React fonctionne bien, et l'événement dom réinitialise toujours l'état à l'état initial.

import React, { useState, useEffect } from "react";
import "./style.css";

export default function App() {
  const [num, setNum] = useState(0);
  function clickMe() {
    setNum(num + 1);
  }
  useEffect(() => {
    document.getElementById("app_btn").addEventListener("click", clickMe);
    return () =>
      document.getElementById("app_btn").removeEventListener("click", clickMe);
  }, []);
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <div>App {num}</div>
      <button id="app_btn">DOM click</button> <br />
      <button onClick={clickMe}>React Click</button>
    </div>
  );
}

Le projet complet peut être consulté ici https://stackblitz.com/edit/react-wqrmcu?file=src/App.js

Answer 1

Cela se produit parce que votre gestionnaire d'événements natif continue à fermer la valeur de num qui était disponible après le premier rendu (cette valeur est 0). Vous devez ajouter et supprimer l'écouteur d'événement natif à chaque mise à jour de l'état pour que cela fonctionne ainsi :-

  useEffect(() => {
    document.getElementById("app_btn").addEventListener("click", clickMe);
    return () =>
      document.getElementById("app_btn").removeEventListener("click", clickMe);
  }, [num]);

Une autre approche pourrait être d'utiliser un callback à l'intérieur de la fonction de mise à jour de l'état comme @Mahdi l'a indiqué. Cela vous permettra d'obtenir un nouvel état sur la base de l'état précédent. Mais la valeur de num accessible à l'auditeur d'événements natif est de 0. Vous pouvez le vérifier en effectuant un console.log(num) à l'intérieur clickMe .

Answer 2

function clickMe() {
    setNum(prevNum => prevNum + 1); // <-- you need this
  }