Reagieren – Inhalte werden erst geladen, wenn sie aktualisiert werden – Problem mit der Zustandsverwaltung

Question

Die Daten werden erst geladen, wenn ich die Seite aktualisiere. Ich denke, das Problem liegt in der Zustandsverwaltung, aber ich scheine es nicht zum Laufen zu bringen. Jede Hilfe wird sehr geschätzt!

Wenn ein Benutzer ein Konto registriert und sich bei der Sitzung anmeldet, sollten alle Beiträge des Benutzers gerendert werden. In meinem Fall wird es jedoch erst gerendert, wenn ich die Seite aktualisiere.

client/src/context/ContentContext.js

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

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

    useEffect(() => {
        fetch('/posts')
        .then(resp => {
            if (bzw. ok) {
                resp.json().then(data => {
                    setContents(data);
                });
            }
        })
        .catch(errors => {
            setErrors(errors);
        });
    }, [setErrors])

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

    const editPost = (newPost) =>
        const aktualisiertContentList = content.map(post => {
            if (newPost.id === post.id) {
                newPost zurückgeben
            } anders {
                Rücksendepost;
            }
        });
        setContents(updatedContentList);
    }

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

    zurückkehren (
        <ContentContext.Provider value={{ content, addPost, editPost, deletePost }}>{children}</ContentContext.Provider>
    )
}

export { ContentContext, ContentProvider }

client/src/posts/PostDetail.js

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

Funktion PostDetail () {
    const { setErrors } = useContext(ErrorContext);
    const { user } = useContext(UserContext);
    const { content, 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(data => {
               setLiked(data.liked);
           })
           .catch(error => {
               setErrors(error)
           })
         }, [post.id, setErrors])
     }

Standard-PostDetail exportieren;

Answer 1

我认为应该没问题：

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