首页 > 解决方案 > 如何解决“未捕获的类型错误:无法读取未定义的属性'参数'”reactjs + django

问题描述

我正在练习 reactjs 看这个视频https://www.youtube.com/watch?v=5rh853GTgKo&list=PLJRGQoqpRwdfoa9591BcUS6NmMpZcvFsM&index=9

我想使用 uid 和 token 验证我的信息,但我不知道如何传递它。

在此代码中:Activate.js in container

import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { verify } from '../actions/auth';

const Activate = ({ verify, match }) => {
const [verified, setVerified] = useState(false);

const verify_account = e => {
  const uid = match.params.uid; // I Think This part is Problem
  const token = match.params.token;

  verify(uid, token);
  setVerified(true);
};


if (verified) {
   return <Redirect to='/' />
}

这段代码:auth.js in actions

export const verify = (uid, token) => async dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  const body = JSON.stringify({ uid, token });

  try {
    await axios.post(`${process.env.REACT_APP_API_URL}/auth/users/activation/`, body, config);

    dispatch ({
      type: ACTIVATION_SUCCESS,
    });
  } catch (err) {
    dispatch ({
      type: ACTIVATION_FAIL
    });
  }
}

我想我没有渲染uid,token,但我很困惑如何做到这一点

App.js 代码:

<Router>
  <Layout>
    <Switch>
      <Route exact path ='/activate/:uid/:token'>
        <Activate />
      </Route>
    </Switch>
  </Layout>
</Router>

我会很感激任何帮助。:)

标签: javascriptreactjsreact-routerjwt

解决方案


使用useParams挂钩提取uidtoken参数:

import React, { useState } from 'react';
import { Redirect, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { verify } from '../actions/auth';

const Activate = ({ verify }) => {
const [verified, setVerified] = useState(false);
const { uid, token } = useParams();

const verify_account = e => {
  verify(uid, token);
  setVerified(true);
};


if (verified) {
   return <Redirect to='/' />
}

推荐阅读