سلام دوستان.
کاربر برای ثبت نام باید روند زیر رو طی کنه:
وارد روت ثبت نام میشه:
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;
ممنون میشم راهنمایی کنید.
شما باید یه 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);
})
}
موفق باشید.
سلام به شما دوست عزیز.
چون دارید از کلاس کامپوننت استفاده می کنید، برای حل این مشکل باید از مفهومی به نام HOC (High Order Component) استفاده کنید و آیدی اون کاربری که ثبت نام میکنه رو بدید به کلاس کامپوننت verify.
موفق باشید.
@rezajahangir
با مفهوم HOC آشنا هستم ولی تو این قسمت نمیدونم دقیقا چطور باید اینکارو انجام بدم.
شما باید یه 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);
})
}
موفق باشید.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟