React - kandungan tidak dimuatkan sehingga dimuat semula - nyatakan isu pengurusan

Question

Data tidak dimuatkan sehingga saya memuat semula halaman. Saya fikir masalahnya ialah pengurusan negeri tetapi nampaknya tidak dapat menyelesaikannya. Sebarang bantuan amat dihargai!

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.

client/src/context/ContentContext.js

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 }

client/src/posts/PostDetail.js

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;

Answer 1

Saya rasa ia sepatutnya baik:

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