如何解决React js TypeError：无法读取未定义
我正在使用 "react-router": "^6.0.0-beta.0" 并且在我的 Activate.js 文件 中，我在 Chrome 上不断收到错误消息下面
TypeError: 无法读取未定义的属性 'params'
这是我的 Activate.js 代码示例，我使用的是带有 react hooks 的功能组件，现在这段代码的工作原理是发送电子邮件时当您注册并点击电子邮件激活链接时，它会将您重定向到一个被点击的按钮，以便帐户激活，这正是我得到“无法读取未定义的属性 'params'" 下面的代码正是出现错误的地方。
useEffect(() => {
/* get token from params like /active/token
then decode this token and get name*/
let token = match.params.token; //Error is occuring Here
let name = jwt.decode(token);
if (token) {
setFormData({ ...formData,name,token });
}
/* eslint-disable no-unused-vars */
import React,{ useState,useEffect } from 'react';
import authSvg from '../assets/welcome.svg';
import { ToastContainer,toast } from 'react-toastify';
import axios from 'axios';
import jwt from 'jsonwebtoken';
import { authenticate,isAuth } from '../helpers/auth';
// import { Link,Redirect } from 'react-router-dom';
import { Link as RouterLink,useNavigate } from 'react-router-dom';
const Activate = ({ match }) => {
const [formData,setFormData] = useState({
name: '',token: '',show: true
});
useEffect(() => {
/* get token from params like /active/token
then decode this token and get name*/
let token = match.params.token; //Error is occuring Here
let name = jwt.decode(token);
if (token) {
setFormData({ ...formData,token });
}
console.log(token,name);
// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);
const { name,show,token } = formData;
const handleSubmit = e => {
e.preventDefault();
axios
.post(`${process.env.REACT_APP_API_URL}/activation`,{
token
})
.then(res => {
setFormData({
...formData,show: false
});
toast.success(res.data.message);
})
.catch(err => {
toast.error(err.response.data.errors);
});
};
const navigate = useNavigate();
return (
<div className='min-h-screen bg-gray-100 text-gray-900 flex justify-center'>
{isAuth() ? <navigate to='/app/dashboard' /> : null}
<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'>
Welcome {name}
</h1>
<form
className='w-full flex-1 mt-8 text-indigo-500'
onSubmit={handleSubmit}
>
<div className='mx-auto max-w-xs relative '>
<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-user-plus fa 1x w-6 -ml-2' />
<span className='ml-3'>Activate your Account</span>
</button>
</div>
<div className='my-12 border-b text-center'>
<div className='leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2'>
Or sign up again
</div>
</div>
<div className='flex flex-col items-center'>
<a
className='w-full max-w-xs font-bold shadow-sm rounded-lg py-3
bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5'
href='/register'
target='_self'
>
<i className='fas fa-sign-in-alt fa 1x w-6 -ml-2 text-indigo-500' />
<span className='ml-4'>Sign Up</span>
</a>
</div>
</form>
</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 Activate;
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';
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 /> },//This the route am using to route for my activate.js file
]
}
];
export default routes;
补充一下，我正在关注一个教程，例如，这是他用来在他的 activate.js 文件中路由道具的示例，这就是我认为我的代码中的问题无法解决的地方为了捕捉我可能在他的教程中遇到的道具，他使用的是更高版本的反应而不是“反应路由器”：我在这种情况下使用的“^ 6.0.0-beta.0”但下面是他的代码示例。
ReactDOM.render((
<browserRouter>
<App />
<Route path='/' exact render={props => <App {...props} />}/>
<Route path='/register' exact render={props => <Register {...props} />}/>
<Route path='/users/activate/:token' exact render={props => <Activate {...props} />}/>
</browserRouter>
),document.getElementById('root'));
解决方法
您可以尝试使用 useParams 钩子：
import { Link as RouterLink,useNavigate,useParams } from 'react-router-dom';
const Activate = () => {
const [formData,setFormData] = useState({
name: '',token: '',show: true
});
const {token} = useParams();
useEffect(() => {
let name = jwt.decode(token);
if (token) {
setFormData({ ...formData,name,token });
}
console.log(token,name);
// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);
...
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
