Reagieren – Inhalte werden erst geladen, wenn sie aktualisiert werden – Problem mit der Zustandsverwaltung
P粉809110129
P粉809110129 2023-08-17 18:55:35
0
1
427
<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>
P粉809110129
P粉809110129

Antworte allen(1)
P粉005134685

我认为应该没问题:

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 };
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage