REACT JS:TypeError:无法读取未定义的属性“参数" [英] REACT JS: TypeError: Cannot read property 'params' of undefined

问题描述

我的 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//**此处导致错误无法读取未定义的属性'params'**|^ 18 |如果(令牌){19 |setFormData({...formData, token,})20 |}

这也是Chrome错误的截图，方便查看.

这是我在 React 中 Reset.js 页面的完整代码.

import React, { useState, useEffect } from 'react';从'../assets/reset.svg'导入authSvg；导入 { ToastContainer, toast } from 'react-toastify';从 'axios' 导入 axios；const Reset = ({match}) =>{const [formData, setFormData] = useState({密码 1: '',密码 2: '',令牌:'',textChange: '提交'});//eslint-disable-next-line no-unused-varsconst { password1, password2, textChange, token } = formData;useEffect(() => {let token = match.params.token//**这里导致错误无法读取未定义的属性'params'**如果(令牌){setFormData({...formData, token,})}//eslint-disable-next-line react-hooks/exhaustive-deps}, [])const handleChange = text =>e =>{setFormData({ ...formData, [text]: e.target.value });};const handleSubmit = e =>{控制台日志(密码1，密码2)e.preventDefault();if ((password1 === password2) && password1 && password2) {setFormData({ ...formData, textChange: '提交' });公理.put(`${process.env.REACT_APP_API_URL}/password/reset`, {新密码:密码1，重置密码链接:令牌}).then(res => {控制台.日志(res.data.message)设置表格数据({...表单数据，密码 1: '',密码2:''});toast.success(res.data.message);}).catch(错误 => {toast.error('有问题再试一次');});} 别的 {toast.error('密码不匹配');}};返回 (<div className='min-h-screen bg-gray-100 text-gray-900 flex justify-center'><吐司容器/><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'>重置你的密码<div className='w-full flex-1 mt-8 text-indigo-500'><表格className='mx-auto max-w-xs 相对'onSubmit={handleSubmit}><输入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-白色'类型='密码'占位符='密码'onChange={handleChange('password1')}值={密码1}/><输入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 焦点:bg-white'类型='密码'占位符='确认密码'onChange={handleChange('password2')}值={密码2}/><按钮类型='提交'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 flexitems-center justify-center focus:shadow-outline focus:outline-none'><i className='fas fa-sign-in-alt w-6 -ml-2'/><span className='ml-3'>提交</span></表单>

<div className='flex-1 bg-indigo-100 text-center hidden lg:flex'>

;