<p>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! </p> <p>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. </p> <p>client/src/context/ContentContext.js</p> <pre class="brush:php;toolbar:false;">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 }</pre> <p>client/src/posts/PostDetail.js</p> <pre class="brush:php;toolbar:false;">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;</pre> <p><br /></p>

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