React js在重定向到新路由后显示通知

Posted 2023-03-05

【中文标题】React js在重定向到新路由后显示通知

【英文标题】：React js show notification after redirecting to the new route

【发布时间】：2021-11-07 14:54:25

【问题描述】：

所以我在一个 react 项目中有两个表单组件和一个通知组件。提交第一个表单时，路由会重定向到第二个表单的路由，此处必须出现第一个表单的操作已成功完成的通知。如何使用我当前的组件实现这一目标。

我的 AddEmployee.js 表单（操作发生的地方）

const AddEmployee = () => 

const  id  = useParams();
let history = useHistory();
const [notify, setNotify] = useState( isOpen: false, message: '', type: '' )
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function handleUpdate() 
    let item = 
        firstName: firstName,
        lastName: lastName,
    
    //Update API Call Result

    if (result.httpStatus === 200) 
        history.push("/user/" + employeeId); // The route of the second form
        setNotify(
            isOpen: true,
            message: 'Added Successfully',
            type: 'success'
        )
    


return (
    <>
        <input onChange=e => setLastName(e.target.value) name="lastName" type="text" />
        <input onChange=e => setFirstName(e.target.value) name="firstName" type="text" />
    </>
);


export default AddEmployee;

我的 SingleEmployee.js 表单（通知必须出现的地方）

const SingleEmployee = () => 

const  id  = useParams();
const [notify, setNotify] = useState( isOpen: false, message: '', type: '' )
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function getSingleUser() 
    //API to get user Info

    if (result.httpStatus === 200) 
        setFirstName(result.result[0].firstName);
        setLastName(result.result[0].lastName);
    

useEffect(() => 
    getSingleUser();
, []);

return (
    <>
        <label>firstName</label><br />                        
        <label>lastName</label>
        <Notification
            notify=notify
            setNotify=setNotify
        />
    </>
);

export default SingleEmployee;

最后，我的 notification.js

export default function Notification(props) 

const  notify, setNotify  = props;

const handleClose = (event, reason) => 
    if (reason === 'clickaway') 
        return;
    
    setNotify(
        ...notify,
        isOpen: false
    )


return (
    <Snackbar
        open=notify.isOpen
        autoHideDuration=2000
        anchorOrigin= vertical: 'top', horizontal: 'right' 
        onClose=handleClose>
        <Alert
            severity=notify.type
            onClose=handleClose>
            notify.message
        </Alert>
    </Snackbar>
)

所以这个过程是当我添加一个新员工时，我应该被重定向到 SingleEemployee 页面，其中应该显示创建成功的通知，但只有在页面被重定向之后。该怎么做？

【问题讨论】：

阅读 React 中的“提升状态”。这个问题也可能有帮助：***.com/questions/38901106/…

【参考方案1】：

您需要在 SingleEmployee.js 文件中设置通知状态，而不是在 addEmployee 文件中。

我们在推入历史时需要传递一个状态参数。 在 AddEmployee.js 中

const AddEmployee = () => 

const  id  = useParams();
let history = useHistory();
const [notify, setNotify] = useState( isOpen: false, message: '', type: '' )
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function handleUpdate() 
    let item = 
        firstName: firstName,
        lastName: lastName,
    
    //Update API Call Result

    if (result.httpStatus === 200) 
        history.push("/user/" + employeeId, fromCreate: true); // The route of the second form
       
    


return (
    <>
        <input onChange=e => setLastName(e.target.value) name="lastName" type="text" />
        <input onChange=e => setFirstName(e.target.value) name="firstName" type="text" />
    </>
);


export default AddEmployee;

---

const SingleEmployee = () => 

const  id  = useParams();
const location = useLocation();
const [notify, setNotify] = useState( isOpen: false, message: '', type: '' )
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function getSingleUser() 
    //API to get user Info

    if (result.httpStatus === 200) 
        setFirstName(result.result[0].firstName);
        setLastName(result.result[0].lastName);
        if(location.state && location.state.fromCreate)
        setNotify(
                isOpen: true,
                message: 'Added Successfully',
                type: 'success'
            )
    

useEffect(() => 
    getSingleUser();
, []);

return (
    <>
        <label>firstName</label><br />                        
        <label>lastName</label>
         notify.isOpen && <Notification
            notify=notify
            setNotify=setNotify
        /> 
    </>
);

export default SingleEmployee;

【讨论】：

是的，但是每当我访问 singleUser 表单时，通知总是会出现，这在我的项目中不是这种情况，当我更新用户信息或单击更多用户信息时，我也会访问此页面列出所有用户。我不希望每次访问单个员工页面时都出现此通知

我猜您正在发送员工 ID，并且您正在根据 Id 获取记录，所以如果记录存在，那么只有它会显示通知。它不会每次都呈现通知。您可以在 singleEmployee 中检查弹出通知的状态。

我不明白你想说什么。

我已经更新了代码。我已经提出条件。通知仅在通知状态为 isOpen 时可见。

我已经知道了。我需要的是仅当路由 /user/id 从路由 /createuser 重定向时才打开通知的状态。

【参考方案2】：

在你的 App.js 中，你可以检测路由变化，也许你可以利用它来触发通知

import React from 'react';
import  useLocation, Switch  from 'react-router-dom'; 

const App = () => 
  const location = useLocation();

  React.useEffect(() => 
    console.log('route changed');
  , [location]);

  return (
    <Switch>
      /* Routes go here */
    </Switch>
  );
;

【讨论】：

如何检测到路由从创建用户更改为显示单个用户？

在上述示例的第 8 行检查 console.log('route changed')

当我启动应用程序时它只记录 1 次，但是当我更改路线时它什么也不记录

检查这个简单的沙箱，如果你做对了它就会工作sandbox_link