当页面呈现- ReactJS时，检查该项是否存在于消防局db中。

Question

我正在尝试创建一个简单的电影应用程序React，Firebase作为DB，我正在使用TMDB来获取电影。

我已经将注册和登录系统添加到这个应用程序中，所以当用户注册一个名为user的新文档时，就会在db中创建带有id的电子邮件。而且每个用户一开始都有一个空数组，在那里电影将被添加为每个用户最喜欢的电影。下面是新用户注册时数据库的样子。 这是当我们把电影添加到数据库中时的样子。

添加和删除对单击的工作完美。这是标题的代码。

import { FaHeart } from "react-icons/fa";
import { FaRegHeart } from "react-icons/fa";
import { Link } from "react-router-dom";
import { SaveMovie } from "../FavoriteHeaderContext";

const IMAGE_BASE_URL = process.env.REACT_APP_HEADER_IMAGE_BASE_URL;

const Header = ({ header_height, headerMovieData }) => {
    
    const { handleFavorite, favorite } = SaveMovie()

    return (
        <>
            <div className="relative" style={{ minHeight: header_height }}>
                <div className="z-[-1]">
                    <img
                        src={ headerMovieData ? `${ IMAGE_BASE_URL + headerMovieData.backdrop_path }` : "" }
                        className="absolute w-full h-full object-cover select-none"
                        alt="/"
                    />
                    <div className="absolute top-0 w-full h-[80%] bg-gradient-to-b from-[#0d0000] to-transparent"></div>
                    <div className="absolute bottom-0 w-full h-[20%] bg-gradient-to-t from-[#0d0000] to-transparent"></div>
                    <div className="absolute top-0 w-full h-full bg-[#0d0000]/40"></div>
                </div>

                <div className="header absolute bottom-[20%] px-[1rem] sm:px-[2rem]">
                    <h1 className="max-w-[700px] text-red-200 relative text-3xl xl:text-5xl xl:leading-[4rem] font-bold mb-6">
                        {headerMovieData
                            ? headerMovieData.title
                            : "No recommended movies"}
                    </h1>
                    ***{headerMovieData ? (
                        <button
                            onClick={() => handleFavorite(headerMovieData.id, headerMovieData)}
                            className="flex items-center gap-2 my-6 bg-[red]/30 text-white outline outline-2 outline-red-600 hover:bg-red-600 rounded-md whitespace-nowrap py-2 px-8"
                        >
                            Add to favorites
                            {favorite ? (
                                <FaHeart className="text-white" />
                            ) : (
                                <FaRegHeart className="text-white" />
                            )}
                        </button>
                    ) : (
                        ""
                    )}***
                    <p className="text-white max-w-[800px]">
                        {headerMovieData
                            ? headerMovieData.overview
                            : `We can't find movies recommended for you in our database.`}
                        {headerMovieData ? (
                            <Link
                                to={`/movie-details/${headerMovieData?.id}`}
                                className="text-red-500 cursor-pointer font-medium select-none"
                            >
                                <span> More Info...</span>
                            </Link>
                        ) : (
                            ""
                        )}
                    </p>
                </div>
            </div>
        </>
    );
};

export default Header;

*代码*之间的代码是您可能需要在这里查看的代码。

这是上下文的代码：

import { arrayUnion, doc, onSnapshot, updateDoc } from "firebase/firestore";
import React, { createContext, useContext, useEffect, useState } from "react";
import { UserAuth } from "./AuthContext";
import { db } from "./firebase-config";

const FavoriteContext = createContext();

export default function FavoriteContextProvider({ children }) {
    const { user } = UserAuth();

    const [movies, setMovies] = useState([]);
    const [favorite, setFavorite] = useState(false);
    const [movieID, setMovieID] = useState(undefined);

    useEffect(() => {
        if (user?.email == undefined) return;

        setMovieID(doc(db, "users", user?.email));
        onSnapshot(doc(db, "users", user?.email), (doc) => {
            setMovies(() => doc.data()?.savedShows);
        });
    }, [user?.email]);
    
    async function handleFavorite(passedID, data) {
        if (user?.email) {
            if (!favorite) {
                setFavorite(true);
                await updateDoc(movieID, {
                    savedShows: arrayUnion({
                        id: data.id,
                        title: data.title,
                        backdrop_path_img: data.backdrop_path,
                        poster_path_img: data.poster_path,
                    }),
                });
            } else {
                setFavorite(false);
                try {
                    const result = movies.filter(
                        (item) => item.id !== passedID
                    );
                    await updateDoc(movieID, {
                        savedShows: result,
                    });
                } catch (err) {
                    console.log(err);
                }
            }
        } else {
            alert("Log In to save a movie!");
        }
    }

    return (
        <FavoriteContext.Provider value={{ handleFavorite, favorite }} >
            {children}
        </FavoriteContext.Provider>
    );
}

export function SaveMovie() {
    return useContext(FavoriteContext);
}

正如我所说的，从db添加和删除电影工作得很好，按钮从一个概述的心脏变成一个完整的心脏点击。

我想要解决的问题是，当页面加载或呈现时，我想检查电影是否存在于db中，是否存在于数据库中，而不是我想要让心脏变得完整，如果它不像概述的心脏那样离开它。如果你有更多的问题，我试着尽可能地解释这个问题，一定要问。

如果你能帮我一把，我会很感激，因为我仍然是一个反应的初学者。(我在代码中也犯了什么愚蠢的错误吗？)

Answer 1

不知道结构很难准确知道..。但我猜一个简单的检查它是否存在于最初的火线中.

useEffect(() => {
    if (user?.email == undefined) return;

    setMovieID(doc(db, "users", user?.email));
    onSnapshot(doc(db, "users", user?.email), (doc) => {
        setMovies(() => doc.data()?.savedShows);
    
      if (doc.data()?.savedShows.map(movies => movies.id).includes(yourmovieid...I don't know where you get this info from))
{
     setFavorite(true)
}

    });
}, [user?.email]);