React js перенаправляет не перенаправляет

По какой-то причине я не могу понять, что перенаправление не работает. Я не получаю никакой ошибки. Redirect вызывается из библиотеки react-router-dom в консоли я вижу xxx.

** добавлен ** по какой-то причине redirect возвращает ошибку

React js перенаправляет не перенаправляет

это блок перенаправления:

redirectUser = (json) => {
    console.info('json', json);
    console.info('state', this.state);
    if (this.state.auth == true){
        localStorage.setItem('userid', json.userid);
        localStorage.setItem('auth', this.state.auth);
        console.info('xxx');
        return <Redirect to='/biblist' />
    }
}

это данные файла из источников chrome dev:

React js перенаправляет не перенаправляет

это весь компонент.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Redirect, Link } from 'react-router-dom';

import {
    Button,
    Form,
    FormGroup,
    FormControl,
    Col,
    Alert,
    Checkbox,
    ControlLabel,
    HelpBlock,
    Grid,
    Row
} from 'react-bootstrap';

import { userLogedIn } from '../../actions'; 

class LoginForm extends Component {
    constructor() {
        super();
        this.state = {
            username: '',
            password: '',
            data: [],
            auth: false,
            usernameError: '',
            passwordError: '',
            EmptyUsernameError: '',
            EmptyPasswordError: ''
        }
        this.onSubmitLogin = this.onSubmitLogin.bind(this);
        this.onChange = this.onChange.bind(this);

    }

    componentWillMount(){
        console.info('mount', this.props);
    }
    componentDidUpdate(){
        console.info('Update', this.props);
        console.info('Update username',  this.props.userid);

    }

    clientValidate = () => {
        let isError = false;

        if (this.state.username === ''){
            isError = true;
            this.setState({EmptyUsernameError: 'לא הזנתם שם משתמש'});
        }
        if (this.state.password === ''){
            isError = true;
            this.setState({EmptyPasswordError: 'לא הזנתם סיסמה'});
        }


        return isError;
    }

    validate = () => {
        let isError = false;

        if (this.state.auth === false){
            isError = true;
            this.setState({usernameError: 'אחד הפרטים שהזנתם שגוי'});
        }

        return isError;
    }



    onSubmitLogin(event){
        event.preventDefault();

        if (this.clientValidate()){
            this.clientValidate();
        }else{
        fetch('http://127.0.0.1/bibli/api/user_switch/' + this.state.username + 
        '/'+ this.state.password )
        .then(response => response.json())
        .then(json => {
            if (json.count > 0)
            {
                this.setState({auth: true});
                this.props.userLogedIn(json);
                this.redirectUser(json);
            }else{
                let isError = true;
                this.validate();
                this.setState({
                    auth: false,
                    data: null
                });
            }

        })
        .catch(error => console.info('parsing faild', error))
    }

    }

    redirectUser = (json) => {
        console.info('json', json);
        console.info('state', this.state);
        if (this.state.auth == true){
            localStorage.setItem('userid', json.userid);
            localStorage.setItem('auth', this.state.auth);
            console.info('xxx');
            debugger
            return <Redirect to='/biblist' />
        }
    }


    onChange(event){
        this.setState({
            [event.target.name]: event.target.value,
            auth: false,
            usernameError: '',
            EmptyPasswordError: '',
            EmptyUsernameError: ''
        })

    }



    render() {

        return (
            <Grid fluid id = "LoginForm" className = "yellow-bg">

                <Row className = "show-grid">
                    <Col xsOffset = {2} xs = {8} mdOffset = {3} md = {6}>
                        <h2 className = "text-center">כבר רשומים? התחברו!</h2>
                        <Form horizontal>
                            <FormGroup  controlId = "formHorizontalusername">
                                <Col xs = {12} sm = {4}>
                                    <FormControl ref = "username" name = "username" type = "text" onChange = {this.onChange} placeholder = "הקלד דואר אלקטרוני"/>

                                </Col>
                                <Col xs = {12} sm = {4}>
                                    <FormControl ref = "password" name = "password" type = "password" onChange = {this.onChange} placeholder = "הקלד סיסמא"/>

                                </Col>

                                <Col  xs = {12} sm = {4} >

                                    <Button onClick = {this.onSubmitLogin} type = "submit" className = "full-width-btn" id = "loginSubmit">התחבר</Button>

                                    </Col>

                            </FormGroup>
                            {
                                this.state.EmptyUsernameError ? 
                                <Alert variant = "danger"> {this.state.EmptyUsernameError} </Alert> :
                                ''
                            }
                            {
                                this.state.EmptyPasswordError ? 
                                <Alert variant = "danger"> {this.state.EmptyPasswordError} </Alert> :
                                ''
                            }

                            {
                                this.state.usernameError ? 
                                <Alert variant = "danger"> {this.state.usernameError} </Alert> :
                                ''
                            }
                            <small><Link to = "/register">אינך רשום? הרשם!</Link></small>
                        </Form>
                    </Col>
                </Row>
            </Grid>
        );
    }
}

const mapDispatchToProps = dispatch => {
    return {
        userLogedIn: (params) => dispatch(userLogedIn(params))
    };
};


const mapStateToProps = state => {
    return {
        userid: state.authReducer.userid,
        auth: state.authReducer.auth
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Является ли код this.state.authtrue?

Radonirina Maminiaina 28.05.2019 10:37

да, this.state.auth верно

DavSev 28.05.2019 10:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
224
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать с "withRouter" HOC

Пример :

import { withRouter } from 'react-router-dom'

const Button = ({ history }) => (
  <button
    type='button'
    onClick = {() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
)

export default withRouter(Button)

Другие вопросы по теме