React js TypeError：无法读取未定义的属性“参数”
Posted
技术标签:
【中文标题】React js TypeError：无法读取未定义的属性“参数”【英文标题】：React js TypeError: Cannot read property 'params' of undefined 【发布时间】：2021-08-27 23:57:32 【问题描述】：我正在使用 "react-router": "^6.0.0-beta.0" 并且在我的 Activate.js 文件中 我在 Chrome 上不断收到错误消息下面
TypeError: 无法读取未定义的属性“参数”
这是我的 Activate.js 代码示例，我正在使用带有 react hooks 的 功能组件 现在该代码的工作方式是发送电子邮件时当您注册并单击电子邮件激活链接时，它会将您重定向到单击的按钮，以便帐户激活，这正是我得到“不能读取未定义的属性“参数” 下面的代码正是出现错误的地方。
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 );
整个Activate.js文件的完整代码示例如下
/* 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, name, 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;
下面是如何路由我的 Activate.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';
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" /> ,
path: '*', 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 文件中路由道具的一个例子，这就是我认为我的代码中的问题无法为了捕捉我可能面临的道具，尽管在他的教程中他使用的是更高版本的 react 而不是我在这种情况下使用的“react-router”：“^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'));
image 是 Chrome 浏览器上显示的错误。
【问题讨论】：
【参考方案1】：您可以尝试使用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
, []);
...
【讨论】：
非常感谢您的帮助，我很感激，错误已清除，但例如我可以在 Chrome 控制台中看到详细信息，但现在我得到一个空白页面，而不是我可以用来激活帐户有关如何查看页面而不是获得空白 Chrome 页面的一些额外帮助会很有帮助。 @AJPHIL 你没有收到另一个错误吗？无论如何，这可能是因为在 useEffectconst name, show, token = formData; 正下方的行中再次声明了令牌。用const params = useParams() 更改我告诉你的行，然后使用 params.token 读取令牌
让我试着用来自 Imgur 的图片来说明会更容易，现在让我们回到第一个问题的部分，当你告诉我现在使用 const token = useParams 时我添加了那行我得到一个错误链接是 imgur.com/a/G60eTGf 从这个链接中的错误我决定删除令牌，因为它说它已经被调用然后我尝试作为下面图片中的链接 imgur.com/a/zJVmJbI 在此之后我继续检查在带有链接图像imgur.com/a/DNV76gj 的 Chrome 浏览器上，您也可以看到页面为空白并在控制台上出现错误
上面的评论有图片和插图来描述你给我的第一个解决方案，让我更清楚，谢谢
啊，好吧，我认为您的问题在于您将Welcome name 写入<h1> 的那一行，似乎 name 是一个对象而不是字符串。尝试使用Welcome name.username 或删除它以测试这是否真的是错误以上是关于React js TypeError：无法读取未定义的属性“参数”的主要内容，如果未能解决你的问题，请参考以下文章
TypeError：无法读取 null 的属性（读取“推送”）react.js
TypeError：无法读取未定义的属性“当前”（使用 React.js）
REACT JS：TypeError：无法读取未定义的属性“参数”
React js TypeError：无法读取未定义的属性“参数”