如何在 React useEffect 中使用函数

Question

我希望下面的代码位于React useEffect 中，因为每次发生更改时，我都希望组件重新呈现。但是 react 不允许在函数中使用 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 wrapped in a 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>