Reagieren – Inhalte werden erst geladen, wenn sie aktualisiert werden – Problem mit der Zustandsverwaltung
P粉809110129
2023-08-17 18:55:35
<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>
我认为应该没问题: