<p>資料在我刷新頁面之前不會載入。我認為問題是狀態管理，但似乎無法使其工作。非常感謝任何幫助！ </p> <p>當使用者註冊帳戶時，他們登入會話中，所有使用者的貼文應該被渲染出來。然而，在我的情況下，直到我刷新頁面才會渲染出來。 </p> <p>client/src/context/ContentContext.js</p> <pre class="brush:php;toolbar:false;">import { createContext, useContext, useEffect, useState } from "react"; import { ErrorContext } from "./ErrorContext"; const ContentContext = createContext({}); const ContentProvider = ({children}) => { const { setErrors } = useContext(ErrorContext); const [contents, setContents] = useState([]); useEffect(() => { fetch('/posts') .then(resp => { if (resp.ok) { resp.json().then(data => { setContents(data); }); } }) .catch(errors => { setErrors(errors); }); }, [setErrors]) const addPost = (newPost) => { setContents([...contents, newPost]); } const editPost = (newPost) => { const updatedContentList = contents.map(post => { if (newPost.id === post.id) { return newPost } else { return post; } }); setContents(updatedContentList); } const deletePost = (id) => { const updatedContentList = contents.filter(post => post.id !== id) setContents(updatedContentList); } return ( <ContentContext.Provider value={{ contents, addPost, editPost, deletePost }}>{children}</ContentContext.Provider> ) } export { ContentContext, ContentProvider }</pre> <p>client/src/posts/PostDetail.js</p> <pre class="brush:php;toolbar:false;">import { useContext, useEffect, useState } from "react"; function PostDetail () { const { setErrors } = useContext(ErrorContext); const { user } = useContext(UserContext); const { contents, deletePost } = useContext(ContentContext); const postId = parseInt(useParams().id); const post = contents.find(post => post.id === postId); useEffect(() => { fetch(`/posts/${post.id}/likes`) .then(resp => resp.json()) .then(data => { setLiked(data.liked); }) .catch(error => { setErrors(error) }) }, [post.id, setErrors]) } export default PostDetail;</pre> <p><br /></p>

import React, { useContext, useEffect, useState } from "react";
import { ErrorContext } from "./ErrorContext";
import { AuthContext } from "./AuthContext"; 

const ContentProvider = ({ children }) => {
  const { setErrors } = useContext(ErrorContext);
  const { isLoggedIn } = useContext(AuthContext); 
  const [contents, setContents] = useState([]);
  const [loading, setLoading] = useState(true); 

  useEffect(() => {
    if (isLoggedIn) {
      fetch('/posts')
        .then((resp) => {
          if (resp.ok) {
            resp.json().then((data) => {
              setContents(data);
              setLoading(false); 
            });
          } else {
            setLoading(false); 
            setErrors("Err");
          }
        })
        .catch((error) => {
          setLoading(false); 
          setErrors(error);
        });
    }
  }, [isLoggedIn, setErrors]);

  return (
    <ContentContext.Provider value={{ contents, setLoading }}>
      {loading ? <p>加载中...</p> : children}
    </ContentContext.Provider>
  );
};

export { ContentProvider };