Reactjs 发布到数据库时不刷新收藏夹

您建议我实施哪些更改，以解决收藏夹在发布到数据库时不刷新的问题？用户可以单击一颗心来选择食谱。一旦用户点击，心脏就会从白色变为红色，从而将配方添加到他们的收藏夹列表中。所发生的是心脏不会改变颜色&在用户刷新屏幕之前，喜爱的配方不会出现在收藏夹列表中。此应用程序已在React中编码，以下是两个文件，我相信这两个文件将控制此操作：

配方：

const Recipe = ({ recipe }) => {
  const [show, setShow] = useState(false);
  const { label, image, url, ingredients } = recipe.recipe;
  const favorites = useContext(FavoritesContext);
  const recipeIsInMyFavorites =
    favorites.findIndex(
      (favorite) => favorite.recipe.uri === recipe.recipe.uri
    ) > -1;
  const uid = firebase.auth().currentUser.uid;
  const addToFavorites = () => {
    instance.post(`users/${uid}/favorites.json`, recipe).then((response) => {
      console.log(response);
      alert("This recipe has been added to your favorites' list");
    });
  };
  const noop = () => {
    alert("This recipe is already a favorite");
  };

  return (
    <>
      <div className="recipe">
        <h2>
          {label}
          <Popup
            trigger={
              <i
                className="fa fa-heart"
                style={{
                  fontSize: "30px",
                  color: recipeIsInMyFavorites ? "red" : "white",
                  float: "right",
                }}
                onClick={() =>
                  recipeIsInMyFavorites ? noop() : addToFavorites()
                }
              />
            }
            content="Click to favorite recipe"
            position="top left"
            style={{
              backgroundColor: "#FAD5DF",
              color: "black",
              fontSize: "20px",
            }}
          />
        </h2>

const Recipe=（{Recipe}）=>{
const[show，setShow]=useState（false）；
const{label，image，url，components}=recipe.recipe；
const favorites=useContext（FavoritesContext）；
常量recipeIsInMyFavorites=
favorites.findIndex(
（收藏夹）=>favorite.recipe.uri===recipe.recipe.uri
) > -1;
const uid=firebase.auth（）.currentUser.uid；
const addToFavorites=（）=>{
post（`users/${uid}/favorites.json`，recipe）。然后（（response）=>{
控制台日志（响应）；
警告（“此配方已添加到您的收藏夹列表中”）；
});
};
常量noop=（）=>{
警告（“此配方已经是最受欢迎的配方”）；
};
返回(
{label}
}
content=“单击以查看最喜爱的配方”
position=“左上角”
风格={{
背景色：“FAD5DF”，
颜色：“黑色”，
字体大小：“20px”，
}}
/>

收藏夹上下文：

export const FavoritesContext = createContext();

export function FavoritesProvider(props) {
  const [favorites, setFavorites] = useState([]);
  const { children } = props;

  // Make the DB Call
  useEffect(() => {
    var user = firebase.auth().currentUser;
    var uid;
    if (user != null) {
      uid = user.uid;
      db.ref(`users/${uid}/favorites`).on("value", (snapshot) => {
        console.log("favorites: ", snapshot.toJSON());

        const results = Object.entries(snapshot.toJSON() || {}).map(
          ([id, props]) => ({
            id,
            ...props,
          })
        );
        setFavorites(results);
      });
    }
  }, []);
  return (
    <FavoritesContext.Provider value={favorites}>
      {children}
    </FavoritesContext.Provider>
  );
}

导出常量FavoritesContext=createContext（）； 导出功能收藏夹Provider（道具）{ const[favorites，setFavorites]=useState（[]）； const{children}=props； //打数据库电话 useffect（（）=>{ var user=firebase.auth（）.currentUser； 变量uid； 如果（用户！=null）{ uid=user.uid； db.ref（`users/${uid}/favorites`）。on（“value”，（snapshot）=>{ log（“收藏夹：，snapshot.toJSON（））； const results=Object.entries（snapshot.toJSON（）| |{}）.map( （[id，道具]）=>({ 身份证件 …道具， }) ); 设置收藏夹（结果）； }); } }, []); 返回( {儿童} ); }

---

这是我的代码中需要更改的内容：

const [recipeIsInMyFavorites, setRecipeIsInMyFavorites] = useState(false);
  useEffect(() => {
    setRecipeIsInMyFavorites(
      favorites.some((favorite) => favorite.recipe.uri === recipe.recipe.uri)
    );
  }, [favorites, recipe.recipe.uri]);

---

在配方组件中，您可能需要一个

useffect

钩子。这样，您就可以知道何时从保存中返回新数据。这听起来不错，但我该如何实现它？从我在youtube上看到的情况来看，Useffect在发布到api时非常有用，但我只是没有看到任何关于发布到数据库的内容