问题描述
我的 React 前端似乎有问题我正在处理我的 Reset.js 页面,并且不断收到错误消息
TypeError: 无法读取未定义的属性 'params'
一旦我转到 Reset.js 页面 就会发生这种情况,这是如何工作的,当用户忘记他们的密码时,他们会按顺序收到一封电子邮件使用 jwt 重置他们的密码,当点击电子邮件中的链接时,它会将您路由到 Reset.js 页面,您将在此处填写凭据以重置密码。
但是在到达路线的过程中,我收到一个 TypeError: Cannot read property 'params' of undefined
错误,这是下面显示的受影响的 React js 代码行。
14 | const { password1,password2,textChange,token } = formData;
15 |
16 | useEffect(() => {
> 17 | let token = match.params.token // **Error is caused here Cannot read property 'params' of undefined**
| ^ 18 | if(token) {
19 | setFormData({...formData,token,})
20 | }
这也是Chrome错误的截图,方便查看。
这是我在 React 中 Reset.js 页面的完整代码。
import React,{ useState,useEffect } from 'react';
import authSvg from '../assets/reset.svg';
import { ToastContainer,toast } from 'react-toastify';
import axios from 'axios';
const Reset = ({match}) => {
const [formData,setFormData] = useState({
password1: '',password2: '',token: '',textChange: 'Submit'
});
// eslint-disable-next-line no-unused-vars
const { password1,token } = formData;
useEffect(() => {
let token = match.params.token // **Error is caused here Cannot read property 'params' of undefined**
if(token) {
setFormData({...formData,})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
},[])
const handleChange = text => e => {
setFormData({ ...formData,[text]: e.target.value });
};
const handleSubmit = e => {
console.log(password1,password2)
e.preventDefault();
if ((password1 === password2) && password1 && password2) {
setFormData({ ...formData,textChange: 'Submitting' });
axios
.put(`${process.env.REACT_APP_API_URL}/password/reset`,{
newPassword: password1,resetPasswordLink: token
})
.then(res => {
console.log(res.data.message)
setFormData({
...formData,password1: '',password2: ''
});
toast.success(res.data.message);
})
.catch(err => {
toast.error('Something is wrong try again');
});
} else {
toast.error('Passwords don\'t matches');
}
};
return (
<div className='min-h-screen bg-gray-100 text-gray-900 flex justify-center'>
<ToastContainer />
<div className='max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1'>
<div className='lg:w-1/2 xl:w-5/12 p-6 sm:p-12'>
<div className='mt-12 flex flex-col items-center'>
<h1 className='text-2xl xl:text-3xl font-extrabold'>
Reset Your Password
</h1>
<div className='w-full flex-1 mt-8 text-indigo-500'>
<form
className='mx-auto max-w-xs relative '
onSubmit={handleSubmit}
>
<input
className='w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white'
type='password'
placeholder='password'
onChange={handleChange('password1')}
value={password1}
/>
<input
className='w-full mt-5 px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white'
type='password'
placeholder='Confirm password'
onChange={handleChange('password2')}
value={password2}
/>
<button
type='submit'
className='mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none'
>
<i className='fas fa-sign-in-alt w-6 -ml-2' />
<span className='ml-3'>Submit</span>
</button>
</form>
</div>
</div>
</div>
<div className='flex-1 bg-indigo-100 text-center hidden lg:flex'>
<div
className='m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat'
style={{ backgroundImage: `url(${authSvg})` }}
></div>
</div>
</div>
;
</div>
);
};
export default Reset;
我也尝试通过添加 useParams
来修复它,尽管它似乎没有按计划锻炼,但这是我尝试进行的修复但没有锻炼,所以我决定寻求帮助,
这是我在下面尝试过的;
import { useParams } from 'react-router-dom';
import jwt from 'jsonwebtoken'; //added this because of the way I was using jwt.decode
textChange: 'Submit'
});
// eslint-disable-next-line no-unused-vars
const { password1,textChange } = formData; //I removed token from here since we were calling it on line 21 in the params below
// const { password1,token } = formData; //this is the original code format and the one above is what I edited.
const { token } = useParams();
useEffect(() => {
let password = jwt.decode(token); //added jwt.decode(token) here though at first it was match.params.token
// let token = match.params.token
if(token) {
setFormData({...formData,password,}) //added password here tho it wasnt supposed to be their as reference to the original code.
}
// eslint-disable-next-line react-hooks/exhaustive-deps
},[])
当我使用 useParams 在 Chrome 控制台 中读取上述代码时显示的错误。
PUT http://localhost:4000/api/password/reset 400(错误请求)
下面是错误,但以截图形式方便查看,但与上面的相同。 然后下面是我用于 Reset.js 页面
的路由import { Navigate } from 'react-router-dom';
import DashboardLayout from 'src/components/DashboardLayout';
import MainLayout from 'src/components/MainLayout';
import Account from 'src/pages/Account';
import CustomerList from 'src/pages/CustomerList';
import AssistantList from 'src/pages/AssistantList';
import MarketList from 'src/pages/MarketList';
import Dashboard from 'src/pages/Dashboard';
import Login from 'src/pages/Login';
import NotFound from 'src/pages/NotFound';
import ProductList from 'src/pages/ProductList';
import Register from 'src/pages/Register';
import Settings from 'src/pages/Settings';
import Activate from 'src/pages/Activate';
import Forget from 'src/pages/Forget';
import Reset from 'src/pages/Reset'; //This is how I imported my Reset.js Page
const routes = [
{
path: 'app',element: <DashboardLayout />,children: [
{ path: 'account',element: <Account /> },{ path: 'assistants',element: <AssistantList /> },{ path: 'customers',element: <CustomerList /> },{ path: 'dashboard',element: <Dashboard /> },{ path: 'markets',element: <MarketList /> },{ path: 'products',element: <ProductList /> },{ path: 'settings',element: <Settings /> },{ path: '*',element: <Navigate to="/404" /> }
]
},{
path: '/',element: <MainLayout />,children: [
{ path: 'login',element: <Login /> },{ path: 'register',element: <Register /> },{ path: '404',element: <NotFound /> },{ path: '/',element: <Navigate to="/app/dashboard" /> },element: <Navigate to="/404" /> },{ path: '/users/activate/:token',element: <Activate /> },{ path: '/users/password/forget',element: <Forget /> },{ path: '/users/password/reset/:token',element: <Reset /> } //Here is how I routed my reset.js page
]
}
];
export default routes;
解决方法
用 Reset
(https://reactrouter.com/web/api/withRouter) 包裹您的 withRouter
组件