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

Question

您建议我应该实施哪些更改以解决收藏夹在发布到数据库时不刷新的问题？用户可以点击一颗心来收藏一个食谱。一旦用户单击它，心脏应该会从白色变为红色，从而将食谱添加到他们的收藏夹列表中。正在发生的事情是心脏不会改变颜色，并且在用户刷新屏幕之前，最喜欢的食谱不会出现在收藏列表中。这个应用程序是用 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>

FavoritesContext：

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>
  );
}

Answer 1

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

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