Armin Rahmati
3 سال پیش توسط Armin Rahmati مطرح شد
3 پاسخ

گرفتن آیدی کاربر هنگام ثبت نام در ریکت

سلام دوستان.
کاربر برای ثبت نام باید روند زیر رو طی کنه:
وارد روت ثبت نام میشه:

localhost:3000/register

ابتدا نام، نام خانوادگی و شماره موبایلشو وارد میکنه و سپس به روت یر هدایت میشه.

localhost:3000/verify

حالا اینجا من چطور میتونم user_id هم بگیرم تا زمانی که کاربر کد تاییدشو وارد میکنه، مشخص بشه که چه کاربری کد تایید رو وارد کرده.
قسمت api که با postman تست میکنم به درستی کار میکنه ولی اینجا ارور میده که فیلد user_id نمیتونه خالی باشه.
class component Register:

import React from "react";
import {Link} from 'react-router-dom';
import withNavigate from "./Navigate";
import axios from "axios";

class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fields: {
                first_name: '',
                last_name: '',
                mobile: '',
            },
            errors: {}
        }
    }
handleRequest() {
        const {first_name, last_name, mobile} = this.state.fields;
        const {navigate} = this.props;
        axios.post('http://localhost:8000/api/v1/register', {first_name, last_name, mobile})
            .then(response => {
                console.log(response);
                navigate("/verify");
            })
            .catch(error => {
                alert(error.response.data.message);
            })
    }

    handleSubmit(event) {
        event.preventDefault();

        this.handleValidation((valid) => {
            if (valid)
                this.handleRequest();
        });
    }
}

export default withNavigate(Register);

class component Verify

import React from "react";
import axios from "axios";
import validator from "validator";

class Verify extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            field: {
                verification_code: '',
                user_id: '',
            },
            second: 59,
            errors: {}
        }
    }
handleVerify() {
        const {verification_code} = this.state.field;
        axios.post('http://localhost:8000/api/v1/verify', {verification_code})
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                alert(error.response.data.message);
            })
    }

    handleSubmit(event) {
        event.preventDefault();

        this.handleValidation((valid) => {
            if (valid)
                this.handleVerify();
        });
    }
export default Verify;

ممنون میشم راهنمایی کنید.


ثبت پرسش جدید
رضا جهانگیر
تخصص : Full-Stack Developer
@rezajahangir 2 سال پیش مطرح شد
1

شما باید یه HOC به صورت زیر بنویسید.

import React from 'react';
import {useLocation, useNavigate} from "react-router-dom";

function withRouter(Component) {
    return function
    ComponentWithRouterProp(props) {
        const navigate = useNavigate();
        const location = useLocation();
        return (
            <Component
                {...props}
                navigate={navigate}
                location={location}
            />
        );
    }
}
export default withRouter;

Component Register:

handleRequest() {
    const {first_name, last_name, mobile} = this.state.fields;
    const {navigate} = this.props;
    axios.post('http://localhost:8000/api/v1/register', {first_name, last_name, mobile})
        .then(response => {
            console.log(response);
            navigate("/verify", {state: {user_id: response.data.user_id}});
        })
        .catch(error => {
            alert(error.response.data.message);
        })
}

Component Verify:

handleVerify() {
    const {verification_code} = this.state;
    const {user_id} = this.props.location.state;
    axios.post('http://localhost:8000/api/v1/verify', {verification_code, user_id})
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            alert(error.response.data.message);
        })
}

موفق باشید.


رضا جهانگیر
تخصص : Full-Stack Developer
@rezajahangir 2 سال پیش مطرح شد
1

سلام به شما دوست عزیز.
چون دارید از کلاس کامپوننت استفاده می کنید، برای حل این مشکل باید از مفهومی به نام HOC (High Order Component) استفاده کنید و آیدی اون کاربری که ثبت نام میکنه رو بدید به کلاس کامپوننت verify.
موفق باشید.


Armin Rahmati
@arminrahmati999 2 سال پیش مطرح شد
0

@rezajahangir
با مفهوم HOC آشنا هستم ولی تو این قسمت نمیدونم دقیقا چطور باید اینکارو انجام بدم.


رضا جهانگیر
تخصص : Full-Stack Developer
@rezajahangir 2 سال پیش مطرح شد
1

شما باید یه HOC به صورت زیر بنویسید.

import React from 'react';
import {useLocation, useNavigate} from "react-router-dom";

function withRouter(Component) {
    return function
    ComponentWithRouterProp(props) {
        const navigate = useNavigate();
        const location = useLocation();
        return (
            <Component
                {...props}
                navigate={navigate}
                location={location}
            />
        );
    }
}
export default withRouter;

Component Register:

handleRequest() {
    const {first_name, last_name, mobile} = this.state.fields;
    const {navigate} = this.props;
    axios.post('http://localhost:8000/api/v1/register', {first_name, last_name, mobile})
        .then(response => {
            console.log(response);
            navigate("/verify", {state: {user_id: response.data.user_id}});
        })
        .catch(error => {
            alert(error.response.data.message);
        })
}

Component Verify:

handleVerify() {
    const {verification_code} = this.state;
    const {user_id} = this.props.location.state;
    axios.post('http://localhost:8000/api/v1/verify', {verification_code, user_id})
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            alert(error.response.data.message);
        })
}

موفق باشید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام