React页面刷新后才加载内容——状态管理问题求助

用户注册并登录会话后，原本应该自动渲染所有用户的帖子，但项目中必须刷新页面才会显示，怀疑是状态管理问题但无法解决，寻求帮助。

相关代码文件 #

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 (resp.ok) {
                resp.json().then(data => {
                    setContents(data);
                });
            }
        })
        .catch(errors => {
            setErrors(errors);
        });
    }, [setErrors])

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

    const editPost = (newPost) => {
        const updatedContentList = contents.map(post => {
            if (newPost.id === post.id) {
                return newPost
            } else {
                return post;
            }
        });
        setContents(updatedContentList);
    }

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

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

export { ContentContext, ContentProvider }

client/src/posts/PostDetail.js #

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

function PostDetail () {
    const { setErrors } = useContext(ErrorContext);
    const { user } = useContext(UserContext);
    const { contents, deletePost } = useContext(ContentContext);
    const postId = parseInt(useParams().id);
    const post = contents.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])
     }

export default PostDetail;

问题分析 #

核心问题在于ContentContext中的帖子获取逻辑仅在组件首次挂载或setErrors变化时执行，没有监听用户登录状态的变化。当用户登录后，用户状态（user）发生了改变，但ContentContext并未感知到这个变化，因此不会重新发起请求获取帖子，必须刷新页面重新挂载组件才能触发useEffect获取数据。

另外还有两个潜在问题：

1. fetch('/posts')仅处理了resp.ok的情况，未处理请求成功但状态码非200的情况，可能导致静默失败。
2. PostDetail中直接使用post.id，如果contents中找不到对应帖子（比如登录前未加载数据），post会是undefined，导致报错。

解决方案 #

1. 修改ContentContext，监听用户状态变化 #

在ContentContext中引入UserContext，将user加入useEffect的依赖数组，这样用户登录（user从null/undefined变为有效值）时，会自动重新获取帖子。

修改后的ContentContext.js：

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

const ContentContext = createContext({});
const ContentProvider = ({children}) => {
    const { setErrors } = useContext(ErrorContext);
    // 获取用户状态
    const { user } = useContext(UserContext);
    const [contents, setContents] = useState([]);

    useEffect(() => {
        // 只有用户存在时才获取帖子（避免未登录时发起无效请求）
        if (!user) return;
        
        fetch('/posts')
        .then(resp => {
            if (resp.ok) {
                return resp.json();
            }
            // 处理非200状态码的情况
            throw new Error('Failed to fetch posts');
        })
        .then(data => {
            setContents(data);
        })
        .catch(errors => {
            setErrors(errors);
        });
    }, [setErrors, user]) // 添加user到依赖数组

    // 其余代码保持不变
    const addPost = (newPost) => {
        setContents([...contents, newPost]);
    }

    const editPost = (newPost) => {
        const updatedContentList = contents.map(post => {
            if (newPost.id === post.id) {
                return newPost
            } else {
                return post;
            }
        });
        setContents(updatedContentList);
    }

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

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

export { ContentContext, ContentProvider }

2. 修复PostDetail中的潜在报错 #

在PostDetail中先判断post是否存在，再执行后续逻辑：

修改后的PostDetail.js片段：

function PostDetail () {
    const { setErrors } = useContext(ErrorContext);
    const { user } = useContext(UserContext);
    const { contents, deletePost } = useContext(ContentContext);
    const postId = parseInt(useParams().id);
    const post = contents.find(post => post.id === postId);
    // 新增状态
    const [liked, setLiked] = useState(false);

    useEffect(() => {
        // 先判断post是否存在
        if (!post) return;
        
        fetch(`/posts/${post.id}/likes`)
           .then(resp => {
               if (resp.ok) return resp.json();
               throw new Error('Failed to fetch likes');
           })
           .then(data => {
               setLiked(data.liked);
           })
           .catch(error => {
               setErrors(error)
           })
         }, [post?.id, setErrors]) // 使用可选链避免undefined报错

    // 渲染时也先判断post是否存在
    if (!post) {
        return <div>帖子不存在或尚未加载</div>;
    }

    // 其余渲染逻辑...
}

这样修改后，用户登录时user状态变化会触发ContentContext重新获取帖子，页面无需刷新就能自动渲染内容。

内容的提问来源于stack exchange，提问作者janestack