React - 更新されるまでコンテンツが読み込まれない - 状態管理の問題

Question

ページを更新するまでデータは読み込まれません。問題は状態管理にあると思いますが、それを機能させることができないようです。ご協力をよろしくお願いいたします。

ユーザーがアカウントを登録してセッションにログインすると、ユーザーのすべての投稿が表示される必要があります。ただし、私の場合、ページを更新するまでレンダリングされません。

client/src/context/ContentContext.js

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

const ContentContext = createContext({});
const ContentProvider = ({children}) => {
    const { setErrors } = useContext(ErrorContext);
    const [コンテンツ, setContents] = useState([]);

    useEffect(() => {
        fetch('/posts')
        .then(resp => {
            if (それぞれok) {
                resp.json().then(data => {
                    setContents(データ);
                });
            }
        })
        .catch(エラー => {
            setErrors(エラー);
        });
    }, [setErrors])

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

    const editPost = (newPost) => {
        const updatedContentList = content.map(post => {
            if (newPost.id === post.id) {
                新しい投稿を返す
            } それ以外 {
                返却ポスト。
            }
        });
        setContents(updatedContentList);
    }

    const deletePost = (id) => {
        const updatedContentList = content.filter(post => post.id !== id)
        setContents(updatedContentList);
    }

    戻る （
        <ContentContext.Provider value={{ content, 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 = content.find(post => post.id === postId);

    useEffect(() => {
        fetch(`/posts/${post.id}/likes`)
           .then(resp => resp.json())
           .then(データ => {
               setLiked(data.liked);
           })
           .catch(error => {
               setErrors(エラー)
           })
         }, [post.id, setErrors])
     }

デフォルトの PostDetail;

をエクスポートします。

Answer 1

大丈夫だと思います:

リーリー