Javascript 如果react中出现某种情况，如何停止渲染组件

您可以使用几个选项来避免NotesContainer组件中的getNotes调用.以下是一些建议.

1. 仅当存在令牌值时才有条件地呈现NotesContainer组件.

   import React, { useEffect } from "react";
   import NotesContainer from "./NotesContainer";
   import { useNavigate } from "react-router-dom";
   import { toast } from "react-toastify";
   
   function Home() {
     const navigate = useNavigate();
   
     const token = localStorage.getItem("token");
   
     useEffect(() => {
       if (!token) {
         navigate("/login");
   
         // for toast
         toast.error("Please login", { .... });
       }
     }, [token]);
   
     return (
       <>
         <div className=" mt-4 px-2">
           <h1 className="text-4xl text-center font-semiboldbold underline underline-offset-2">
             Your Notes
           </h1>
         </div>
         <div>
           {token && <NotesContainer />}
         </div>
       </>
     );
   }
   
   export default Home;
   

2. 有条件地呈现Home组件的内容，如果没有令牌，则为空.

   import React, { useEffect } from "react";
   import NotesContainer from "./NotesContainer";
   import { useNavigate } from "react-router-dom";
   import { toast } from "react-toastify";
   
   function Home() {
     const navigate = useNavigate();
   
     const token = localStorage.getItem("token");
   
     useEffect(() => {
       if (!token) {
         navigate("/login");
   
         // for toast
         toast.error("Please login", { .... });
       }
     }, [token]);
   
     if (!token) return null;
   
     return (
       <>
         <div className=" mt-4 px-2">
           <h1 className="text-4xl text-center font-semiboldbold underline underline-offset-2">
             Your Notes
           </h1>
         </div>
         <div>
           <NotesContainer />
         </div>
       </>
     );
   }
   
   export default Home;
   

3. 有条件地呈现Home组件的内容，如果没有令牌，则重定向.

   import React, { useEffect } from "react";
   import NotesContainer from "./NotesContainer";
   import { useNavigate, Navigate } from "react-router-dom";
   import { toast } from "react-toastify";
   
   function Home() {
     const navigate = useNavigate();
   
     const token = localStorage.getItem("token");
   
     useEffect(() => {
       if (!token) {
         // for toast
         toast.error("Please login", { .... });
       }
     }, [token]);
   
     if (!token) return <Navigate to="/login" replace />;
   
     return (
       <>
         <div className=" mt-4 px-2">
           <h1 className="text-4xl text-center font-semiboldbold underline underline-offset-2">
             Your Notes
           </h1>
         </div>
         <div>
           <NotesContainer />
         </div>
       </>
     );
   }
   
   export default Home;
   

4. 无条件地呈现Home组件的内容，包括NotesContainer组件，并在NotesContainer中判断令牌.

   import React, { useEffect } from "react";
   import NotesContainer from "./NotesContainer";
   import { useNavigate } from "react-router-dom";
   import { toast } from "react-toastify";
   
   function Home() {
     const navigate = useNavigate();
   
     const token = localStorage.getItem("token");
   
     useEffect(() => {
       if (!token) {
         navigate("/login");
   
         // for toast
         toast.error("Please login", { .... });
       }
     }, [token]);
   
     return (
       <>
         <div className=" mt-4 px-2">
           <h1 className="text-4xl text-center font-semiboldbold underline underline-offset-2">
             Your Notes
           </h1>
         </div>
         <div>
           <NotesContainer />
         </div>
       </>
     );
   }
   
   export default Home;
   

   function NotesContainer() {
     const {
       notes,
       setAdding,
       setIsOpen,
       setCurrentNote,
       getNotes
     } = useContext(NoteContext);
   
     useEffect(() => {
       const token = localStorage.getItem("token");
   
       if (token) {
         getNotes();
       }
     }, []);
   
     return (
       ....
     );
   }