如何卸載 React 功能組件？

Question

我已經構建了幾個模態作為 React 功能組件。 它們通過模態關聯上下文中的isModalOpen boolean 屬性顯示/隱藏。 這效果很好。

現在，由於各種原因，一位同事需要我重構這段代碼，而是將模態的可見性控制在更高的級別。 這是一些示例代碼：

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import { UsersProvider } from '../../../contexts/UsersContext';
import AddUsers from './AddUsers';

const AddUsersLauncher = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <UsersProvider>
        <Button onClick={() => setShowModal(true)}>Add Users</Button>
        {showModal && <AddUsers />}
      </UsersProvider>
    </div>
  );
};

export default AddUsersLauncher;

這一切最初都很好。 呈現一個按鈕，當按下該按鈕時，將顯示模態。

問題在於如何隱藏它。 在我只是在減速器isModalOpen設置為 false 之前。

今天早些時候我和我的同事進行了一次簡短的交談，他說上面的代碼可以工作，我不需要向AddUsers傳遞任何東西。 我在想雖然我需要將setShowModal function 傳遞到組件中，因為然后可以調用它來隱藏模式。

但我對我沒有看到更簡單的方法來做到這一點的可能性持開放態度。 可能有嗎？

Answer 1

要在卸載時調用某些內容，您可以使用useEffect 。 無論您在 useEffect 中返回什么，都將在卸載時調用。 例如，在您的情況下

const AddUsersLauncher = () => {
  const [showModal, setShowModal] = useState(false);


  useEffect(() => {
    return () => {
      // Your code you want to run on unmount.
    };
  }, []); 


  return (
    <div>
      <UsersProvider>
        <Button onClick={() => setShowModal(true)}>Add Users</Button>
        {showModal && <AddUsers />}
      </UsersProvider>
    </div>
  );
};

useEffect 的第二個參數接受一個數組，它比較元素的值以檢查是否再次調用 useEffect。 在這里，我傳遞了空數組[] ，因此它只會調用一次 useEffect 。

如果你在數組中傳遞了其他東西，比如說， showModal ，那么只要showModal值發生變化，useEffect 就會調用，如果指定的話，會調用返回的 function。

Answer 2

如果您想在AddUsers中將showModal保留為 state 變量並從AddUsersLauncher中更改它，那么是的，您必須將setShowModal的引用傳遞給AddUsers 。 React 中的 State 管理在雙向數據流中可能會變得混亂，所以我建議您查看Redux以存儲和更改多個組件共享的 state