Javascript 页面转换时清除重复使用状态

我创建了一个博客，并将单页状态存储到redux状态（singlePost）。当我转到一个特定的post页面时，singlePost被设置为post值。但当我返回主页并单击下一篇文章时，下一篇文章页面将显示上一个值，并立即转到新值

如果用户按下浏览器的返回按钮，我会尝试调度重置功能，但它似乎不起作用。有人能指导我如何改进这一点吗？谢谢大家!

singlePostReducer.js

export const singlePostReducer = createSlice({
  name: "singlePost",
  initialState: {
    isLoadingPost: false,
    singlePost: "",
    newPostResponse: null,
  },
  reducers: {
    setIsLoadingPost: (state, action) => {
      state.isLoadingPost = action.payload.isLoading;
    },
    setSinglePost: (state, action) => {
      state.singlePost = action.payload;
    },
    setNewPostResponse: (state, action) => {
      state.newPostResponse = action.payload;
    },
    resetSinglePost: (state) => {
      state.singlePost = "";
    },
  },
});

 export default function PostPage() {
      const { id } = useParams();
      const singlePost = useSelector((store) => store.singlePost.singlePost);
      const { body, title, createdAt } = singlePost;
      const dispatch = useDispatch();
      const history = useHistory();

      //Does 
      if (history.goBack() || window.onpopstate) {
          dispatch(reset());
        }

      useEffect(() => {
        dispatch(getSinglePost(id));
        
      }, [id, dispatch]);
    
      return (
        <PostPageContainer>
          <h1>{title}</h1>
          <h4>{new Date(createdAt).toLocaleString()}</h4>
          <PostContent>{body}</PostContent>
        </PostPageContainer>
      );
    }

SinglePost.js

export const singlePostReducer = createSlice({
  name: "singlePost",
  initialState: {
    isLoadingPost: false,
    singlePost: "",
    newPostResponse: null,
  },
  reducers: {
    setIsLoadingPost: (state, action) => {
      state.isLoadingPost = action.payload.isLoading;
    },
    setSinglePost: (state, action) => {
      state.singlePost = action.payload;
    },
    setNewPostResponse: (state, action) => {
      state.newPostResponse = action.payload;
    },
    resetSinglePost: (state) => {
      state.singlePost = "";
    },
  },
});

 export default function PostPage() {
      const { id } = useParams();
      const singlePost = useSelector((store) => store.singlePost.singlePost);
      const { body, title, createdAt } = singlePost;
      const dispatch = useDispatch();
      const history = useHistory();

      //Does 
      if (history.goBack() || window.onpopstate) {
          dispatch(reset());
        }

      useEffect(() => {
        dispatch(getSinglePost(id));
        
      }, [id, dispatch]);
    
      return (
        <PostPageContainer>
          <h1>{title}</h1>
          <h4>{new Date(createdAt).toLocaleString()}</h4>
          <PostContent>{body}</PostContent>
        </PostPageContainer>
      );
    }

导出默认函数PostPage（）{
const{id}=useParams（）；
const singlePost=useSelector（（store）=>store.singlePost.singlePost）；
const{body，title，createdAt}=singlePost；
const dispatch=usedpatch（）；
const history=useHistory（）；
//做
if（history.goBack（）| | window.onpopstate）{
调度（重置（））；
}
useffect（（）=>{
调度（getSinglePost（id））；
}，[id，调度]；
返回(
{title}
{新日期（createdAt.toLocaleString（）}
{body}
);
}

问题 问题是，正如所写的那样，

history.goBack（）

总是会立即被调用。我不确定返回值是多少，但这与您无关

window.onpopstate

需要为其分配回调才能工作，但这也不是您想要的，分配回调会覆盖全局值，因此不建议这样做

解决方案 当组件卸载时，您可以从效果清理函数中分派rest操作

export default function PostPage() {
  const { id } = useParams();
  const singlePost = useSelector((store) => store.singlePost.singlePost);
  const { body, title, createdAt } = singlePost;
  const dispatch = useDispatch();
  const history = useHistory();

  useEffect(() => {
    dispatch(getSinglePost(id));
  }, [id, dispatch]);

  useEffect(() => {
    return () => dispatch(reset()); // <-- reset when unmounting
  }, []);

  return (
    <PostPageContainer>
      <h1>{title}</h1>
      <h4>{new Date(createdAt).toLocaleString()}</h4>
      <PostContent>{body}</PostContent>
    </PostPageContainer>
  );
}

导出默认函数PostPage（）{
const{id}=useParams（）；
const singlePost=useSelector（（store）=>store.singlePost.singlePost）；
const{body，title，createdAt}=singlePost；
const dispatch=usedpatch（）；
const history=useHistory（）；
useffect（（）=>{
调度（getSinglePost（id））；
}，[id，调度]；
useffect（（）=>{
return（）=>dispatch（reset（））//