React - le contenu ne se charge pas tant qu'il n'est pas actualisé - problème de gestion de l'état

Question

Les données ne se chargent pas tant que j'actualise la page. Je pense que le problème vient de la gestion de l'État, mais je n'arrive pas à le faire fonctionner. Toute aide est grandement appréciée!

Lorsqu'un utilisateur enregistre un compte et se connecte à la session, tous les messages de l'utilisateur doivent être affichés. Cependant, dans mon cas, le rendu ne s'effectue que lorsque j'actualise la page.

client/src/context/ContentContext.js

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

const ContentContext = createContext({});
const ContentProvider = ({enfants}) =>
    const { setErrors } = useContext(ErrorContext);
    const [contenu, setContents] = useState([]);

    useEffect(() => {
        récupérer('/messages')
        .then(resp => {
            si (resp.ok) {
                resp.json().then(data => {
                    setContents(données);
                });
            }
        })
        .catch(erreurs => {
            setErrors(erreurs);
        });
    }, [setErreurs])

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

    const editPost = (newPost) =>
        const updateContentList = contents.map(post => {
            if (newPost.id === post.id) {
                retourner le nouveau message
            } autre {
                retour du courrier ;
            }
        });
        setContents(updatedContentList);
    }

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

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

exporter { ContentContext, ContentProvider }

client/src/posts/PostDetail.js

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

fonction PostDetail() {
    const { setErrors } = useContext(ErrorContext);
    const {utilisateur} = useContext(UserContext);
    const {contenu, deletePost } = useContext(ContentContext);
    const postId = parseInt(useParams().id);
    const post = contents.find(post => post.id === postId);

    useEffect(() => {
        récupérer(`/posts/${post.id}/likes`)
           .then(resp => resp.json())
           .then(données => {
               setLiked(data.liked);
           })
           .catch(erreur => {
               setErreurs(erreur)
           })
         }, [post.id, setErrors])
     }

exporter PostDetail par défaut;

Answer 1

Je pense que ça devrait aller :

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