J'ai une fonction, qui devrait être appelée dans unmount. Mais il appellera lors du premier montage. Est-ce qu'il y a un moyen de résoudre ceci?

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

export default function App() {
  const [modal, setModal] = useState(false);
  
  useEffect(() => {
    return () => {
      console.log("unmount");
    };
  }, []);
  return (
    <>
      {modal && <Modal />}
      <button onClick={() => setModal(true)}>Click Me</button>
    </>
  );
}

Mon lien de stylet code: https: // codesandbox.io/s/xenodochial-gareth-ww9fi?file=/src/App.js:0-394

1
Lee Ting Rong 25 sept. 2020 à 15:25

2 réponses

Meilleure réponse

Passez un tableau vide [] comme deuxième argument à useEffect.

L'effet est nettoyé et réexécuté à chaque rendu, sauf si vous fournissez un tableau de dépendances. Passer un tableau vide le fera fonctionner uniquement lors du montage et le nettoyer uniquement lors du démontage.

0
ray hatfield 25 sept. 2020 à 12:28

Vous voyez unmount dans votre console car vous avez une erreur lorsque le composant Modal est monté. Dans votre lien codesandbox lorsque l'erreur indique que votre composant App a été démonté. Et le rechargement de codesandbox à chaque fois remonte également votre composant lorsque vous le changez.

0
Raman Nikitsenka 25 sept. 2020 à 12:41