javascript - ReactJS:如何在页面重新加载后从 useLocation 中清除状态 values

我有这种情况,我有一个创建页面,当用户从创建页面完成后它将自动导航到列表页面,在我的创建页面中我设置了一些状态 values 将在列表页面中使用。从那时起,一切正常。但是当我尝试重新加载列表页面时,状态 values 仍然存在但是当我尝试导航到其他页面并返回列表页面时状态 values 被清除,我怎样才能使状态 values 清除从创建页面设置状态 values 后何时重新加载列表页面?

创建页面代码:

import { Link, useNavigate } from "react-router-dom";

const CreatePage = () => {
const navigate = useNavigate();
const handleSubmit = async (e: any) => {
//some code here
if (res.status === 201) {
              navigate("/post", {
                state: {
                  status: true,
                  message: "Post successfully created.",
                },
                replace: true,
              });
            }

});

};

列表页面代码:

import { Link, useLocation } from "react-router-dom";
    interface LocationState {
      status: boolean;
      message: string;
    }
    
    const ListPage = () => {
      const location = useLocation();
      const state = location.state as LocationState;
    
    return(
    //some html here
    <Col>
              {state?.status && <ToastNotificationBasic message={state?.message} />}
            </Col>
    );
    };

正因为如此,每次重新加载列表页面时都会显示 toast 消息。我在这里错过了什么?谢谢!

回答1

我的解决方案对我有用:

const { state } = useLocation<FloorMapType>();

useEffect(() => {
  if (state != null) {
    const { qrText } = state;
    getDeskOnMap(qrText);
  }
}, [state]);



const getDeskOnMap = (deskCode: string) => {
    dispatch(getDesksWithDeskCode(deskCode)).then((response: { meta: any; 
     payload: any }) => {
      const deskMapId: string = response.payload?.data[0]?.map.id;
      setMapEntity(deskMapId);
      const singleDeskResponse: MapItem = response.payload?.data[0];
      handleSelect(MapItemType.Desk, singleDeskResponse);
    });
    // setting useLocation() state to null, so after reload there wouldn't be any state left.
    window.history.replaceState({state: null}, document.title);
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  };

相似文章