React详情页二次渲染后闪消失问题排查与修复请求

核心问题原因 #

1. Reducer状态结构混乱：初始状态是数组[]，但FETCH_POST动作返回包含post属性的对象，导致状态在数组和对象类型间切换。首页通过FETCH_ALL将状态设为数组后，详情页的FETCH_POST会把状态改为对象，后续任何状态更新操作（比如首页组件重渲染）都会让详情页的post值变为undefined，页面因此消失。
2. useEffect依赖缺失：详情页的useEffect未将id和dispatch加入依赖数组，可能导致dispatch引用过时，或路由参数id变化时无法重新触发详情请求。
3. 状态取值逻辑冲突：首页和详情页对state.posts的结构期望不一致，首页需要数组，详情页需要带post属性的对象，结构混乱直接引发多次渲染和页面异常。

修复步骤 #

1. 统一Reducer状态结构 #

修改postReducer，将状态统一为包含posts数组和单个post对象的结构：

import { POST_ACTION_TYPES } from "../../action/post/postActionTypes";

export const postReducer = (state = { posts: [], post: null }, action) => {
    switch (action.type) {
        case POST_ACTION_TYPES.FETCH_ALL:
            return { ...state, posts: action.payload };
        case POST_ACTION_TYPES.FETCH_POST:
            return { ...state, post: action.payload };
        case POST_ACTION_TYPES.CREATE:
            return { ...state, posts: [...state.posts, action.payload] };
        case POST_ACTION_TYPES.UPDATE:
        case POST_ACTION_TYPES.LIKE:
            return {
                ...state,
                posts: state.posts.map((post) =>
                    post._id === action.payload._id ? action.payload : post
                )
            };
        case POST_ACTION_TYPES.DELETE:
            return {
                ...state,
                posts: state.posts.filter((post) => post._id !== action.payload)
            };
        default:
            return state;
    }
};

2. 修正详情页的useEffect依赖 #

更新PostDetails组件的useEffect，添加必要依赖项：

const PostDetails = () => {
    const dispatch = useDispatch();
    const { id } = useParams();
    
    useEffect(() => {
        dispatch(getPost(id));
    }, [id, dispatch]); // 添加id和dispatch到依赖数组
    
    const { post } = useSelector((state) => state.posts);

    if (!post) return null;

    return (
        <div className="post-detail-container">
            <div className="post-details">
                <div className="title">{post.title}</div>
                <div className="tags">
                    {post.tags[0].split(",").map((tag) => "#" + tag.trim() + " ")}
                </div>
                <p readOnly className="message">
                    {post.message}
                </p>
                <div className="createdBy">Created by: {post.name}</div>
                <div className="createdBy">{moment(post.createdAt).fromNow()}</div>
            </div>
            <img
                className="post-image"
                src={post.selectedFile}
                alt=""
                title={post.title}
            />
        </div>
    );
};

3. 调整首页组件的状态取值 #

确保首页组件从state.posts.posts中获取帖子数组（示例：首页列表组件的useSelector）：

const posts = useSelector((state) => state.posts.posts);

以上修改统一了状态结构，完善了依赖逻辑，解决了状态取值冲突，可彻底消除两次渲染和页面消失的问题。

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