<p>Data tidak dimuatkan sehingga saya memuat semula halaman. Saya fikir masalahnya ialah pengurusan negeri tetapi nampaknya tidak dapat menyelesaikannya. Sebarang bantuan amat dihargai! </p> <p>Apabila pengguna mendaftarkan akaun dan mereka log masuk ke sesi, semua siaran pengguna harus dipaparkan. Walau bagaimanapun, dalam kes saya ia tidak dipaparkan sehingga saya memuat semula halaman. </p> <p>client/src/context/ContentContext.js</p> <pre class="brush:php;toolbar:false;">import { createContext, useContext, useEffect, useState } daripada "react"; import { ErrorContext } daripada "./ErrorContext"; const ContentContext = createContext({}); const ContentProvider = ({kanak-kanak}) => const { setErrors } = useContext(ErrorContext); const [kandungan, setContents] = useState([]); useEffect(() => { fetch('/posts') .then(resp => { jika (respon.ok) { resp.json().then(data => { setContents(data); }); } }) .catch(error => { setErrors(errors); }); }, [setErrors]) const addPost = (newPost) => setContents([...contents, newPost]); } const editPost = (newPost) => const updatedContentList = contents.map(post => { if (newPost.id === post.id) { kembali newPost } lain { pos pulang; } }); setContents(updatedContentList); } const deletePost = (id) => const updatedContentList = contents.filter(post => post.id !== id) setContents(updatedContentList); } kembali ( <ContentContext.Provider value={{ contents, addPost, editPost, deletePost }}>{children}</ContentContext.Provider> ) } eksport { ContentContext, ContentProvider }</pre> <p>client/src/posts/PostDetail.js</p> <pre class="brush:php;toolbar:false;">import { useContext, useEffect, useState } daripada "react"; fungsi PostDetail () { const { setErrors } = useContext(ErrorContext); const {pengguna} = useContext(UserContext); const { kandungan, 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]) } eksport PostDetail lalai;</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 };