반응 - 새로 고칠 때까지 콘텐츠가 로드되지 않음 - 상태 관리 문제

Question

페이지를 새로 고칠 때까지 데이터가 로드되지 않습니다. 문제는 상태 관리라고 생각하지만 제대로 작동하지 않는 것 같습니다. 어떤 도움이라도 대단히 감사하겠습니다!

사용자가 계정을 등록하고 세션에 로그인하면 사용자의 모든 게시물이 렌더링되어야 합니다. 그러나 내 경우에는 페이지를 새로 고칠 때까지 렌더링되지 않습니다.

클라이언트/src/context/ContentContext.js

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

const ContentContext = createContext({});
const ContentProvider = ({어린이}) =>
    const { setErrors } = useContext(ErrorContext);
    const [contents, setContents] = useState([]);

    useEffect(() => {
        가져오기('/게시물')
        .then(resp => {
            if (resp.ok) {
                resp.json().then(data => {
                    setContents(데이터);
                });
            }
        })
        .catch(오류 => {
            setErrors(오류);
        });
    }, [setErrors])

    const addPost = (newPost) =>
        setContents([...contents, newPost]);
    }

    const editPost = (newPost) =>
        const updateContentList =contents.map(post => {
            if (newPost.id === post.id) {
                새로운 게시물 반환
            } 또 다른 {
                반환 게시물;
            }
        });
        setContents(updatedContentList);
    }

    const deletePost = (id) =>
        const updateContentList =contents.filter(post => post.id !== id)
        setContents(updatedContentList);
    }

    반품 (
        <ContentContext.Provider value={{contents, addPost, editPost, deletePost }}>{children}</ContentContext.Provider>
    )
}

내보내기 { ContentContext, ContentProvider }

client/src/posts/PostDetail.js

import { useContext, useEffect, useState } from "react";

함수 PostDetail () {
    const { setErrors } = useContext(ErrorContext);
    const { 사용자 } = useContext(UserContext);
    const { 내용, deletePost } = useContext(ContentContext);
    const postId =parseInt(useParams().id);
    const post =contents.find(post => post.id === postId);

    useEffect(() => {
        가져오기(`/posts/${post.id}/likes`)
           .then(resp => resp.json())
           .then(데이터 => {
               setLiked(data.liked);
           })
           .catch(오류 => {
               setErrors(오류)
           })
         }, [post.id, setErrors])
     }

기본 PostDetail 내보내기;

Answer 1

괜찮을 것 같아요:

으아악