REACT JS：TypeError：无法读取未定义的属性“参数”

如何解决REACT JS：TypeError：无法读取未定义的属性“参数”

我的 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 组件