如何在 React useEffect 中使用 function

Question

我希望下面的代碼在React useEffect中，因為每次事情發生變化時，我都希望組件重新渲染。 但是 react 不允許在useEffect中使用 useEffect。

下面的代碼在點擊時被切換。 一切正常，但組件沒有重新加載，因此您需要在其他組件之間切換，以便更新。

const toggleFavorite = () => {
  if (docdata !== "") {
    db.collection("infodata")
      .doc(docdata)
      .set({
        favorite: !favoritePassword
      }, {
        merge: true
      });

    setFavoritePassword(!favoritePassword);
  }
};

<div onClick={toggleFavorite}>
  <FontAwesomeIcon icon={faStar} />
</div>

---

我已經嘗試過這些： React useEffect in function React Async Function 包裹在 UseEffect

但這些似乎不起作用。

任何幫助將不勝感激，

謝謝你。

Answer 1

你可以這樣做：

const [toggle, setToggle] = useState(false);

const toggleFavorite = () => {
    if (docdata !== "") {
        db.collection("infodata")
            .doc(docdata)
            .set({
                favorite: !favoritePassword
            }, {
                merge: true
            });

        setFavoritePassword(!favoritePassword);
    }
};

useEffect(() => {
    toggleFavorite()
}, [toggle])

<div onClick={setToggle(!toggle)}>
    <FontAwesomeIcon icon={faStar} />
</div>