0

Имеется компонент App

    import React from 'react';
    import {  Route, Switch, Redirect } from 'react-router-dom';

    const Header = React.lazy(() => import('./Components/Header/Header'));
    const RegistrationForm = React.lazy(() => import('./Components/Forms/RegistrationForm/RegistrationForm'));
    const LogonForm = React.lazy(() => import('./Components/Forms/LogonForm/LogonForm'));

    import MainPage from './Components/MainPage/MainPage'

    import './App.css';

    export default class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
    //            loggedIn: !!localStorage.getItem('loggedIn')
                loggedIn: false
            };

            this.handleLogIn = this.handleLogIn.bind(this);
        }

        handleLogIn() {
            this.setState({
                loggedIn: true
            });
            localStorage.setItem('loggedIn');
        }

        handleLogOut() {
            this.setState({
                loggedIn: false
            });
            localStorage.removeItem('loggedIn');
        }

        render() {
            const elem = this.state.loggedIn ? (<MainPage/>) : (<Redirect to="/login"/>);
            return (
                <React.Fragment>
                    <Header />
                        <Switch>
                            <Route exact path="/" render={ () => elem}/>
                            <Route exact path="/login" render={() => <LogonForm handleLogIn={this.handleLogIn} />} />
                            <Route exact path="/registration" render={ (props) => <RegistrationForm {...props} /> } />
                        </Switch>
                </React.Fragment>
            )
        }
    };

Если вход не выполнен react-router перенаправляет на компонент LogonForm

import React from 'react';
import { Link } from 'react-router-dom';
import FormLayout from '../../../Layouts/FormLayout/FormLayout'

import '../Forms.css'

export default class LogonForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            login: '',
            password: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const name = target.name;
        const value = target.value;
        this.setState({
            [name]: value
        })
    }

    handleSubmit(event) {
        const login = this.state.login;
        const password = this.state.password;
        fetch('/login', {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                login: login.toLowerCase(),
                password
            })
        }).then(function(res) {
            switch (res.status) {
                case 200:
                    alert('Вход выполнен!');
                    this.props.handleLogIn();
                    break;
                case 403:
                    alert('Неправильное имя пользователя или пароль');
                default:
                    break;
            }
        })
        event.preventDefault();
    }

    render() {
        return (
            <FormLayout>
                <form className='form'  onSubmit = { this.handleSubmit } >
                    <span className='form__title'>Вхід в систему</span>
                    <label>
                        Логін:
                        <input className = "form__input" type ='text' name ='login' value={this.state.login} onChange = { this.handleChange } minLength ='6' required />
                    </label>
                    <label>
                        Пароль:
                        <input className = "form__input" type ='password' name ='password' value={this.state.password} onChange = { this.handleChange } required />
                    </label>
                    <div className = 'form__btn'>
                        <input className = 'btn' type ='submit' value ='Вход' />
                        <Link className = 'btn' to = '/registration' >Регистрация</Link>
                    </div>
                </form>
            </FormLayout>
        )
    }
}

В компонент LogonForm через props я передаю функцию handleLogIn. handleLogIn вызывается в методе handleSubmit компонента LogonForm при успешной авторизации пользователя. Почему у меня не меняется состояние компонента App?

1 ответ 1

1

Первое, что хочу отметить, то что метод setItem принимает два параметра, из которых первый - это имя ключа, второй - это значение. Касательно того, что у Вас не меняется состояние компонента App - подсказать сложно. Почему сложно? Потому что мало деталей. Взял ваш код за основу и набросал простой рабочий пример, в котором проверил, как всё работает и меняется ли состояние компонента App.

Первое - это индексный файл, с которого начинается точка входа в приложение:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";

ReactDOM.render(<App />, document.getElementById("app"));

Всё примитивно и просто, взяли свой компонент и отрендерили. Далее, переходим к самому компоненту и основным правкам, которые я внес. Обратите внимание на маршрутизацию. В первую очередь на то, что в случае, если пользователь залогинент - отобразим ему домашнюю корневую страницу (для наглядности разделил рендеринг на две части - первая для залогиненного пользователя, вторая противоположного условия).

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";

import LogonForm from "./LogonForm.jsx";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: !!localStorage.getItem("loggedIn")
    };

    this.handleLogIn = this.handleLogIn.bind(this);
    this.handleLogOut = this.handleLogOut.bind(this);
  }

  handleLogIn() {
    this.setState({ loggedIn: true });
    localStorage.setItem("loggedIn", true);
  }

  handleLogOut() {
    this.setState({ loggedIn: false });
    localStorage.removeItem("loggedIn");
  }

  render() {
    if (this.state.loggedIn) {
      return (
        <Router>
          <Switch>
            <Route
              exact
              path="/"
              render={() => (
                <div>
                  <div>Home page for logged in user</div>
                  <button onClick={this.handleLogOut}> Logout </button>
                </div>
              )}
            />
            <Redirect to="/" />
          </Switch>
        </Router>
      );
    }

    return (
      <Router>
        <div>
          <Switch>
            <Route
              exact
              path="/login"
              render={() => <LogonForm handleLogIn={this.handleLogIn} />}
            />
            <Route
              exact
              path="/registration"
              render={() => <div> Registration </div>}
            />
            <Redirect to="/login" />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Собственно сам компонент LogonForm я вроде бы оставил без особых изменений (хотя, для наглядности и простоты я убрал fetch и сразу просто вызвал метод, переданный через пропсу):

import React from "react";
import { Link } from "react-router-dom";

export default class LogonForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      login: "",
      password: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault();

    const { login, password } = this.state;
    console.log("login", login);
    console.log("password", password);

    this.props.handleLogIn();
  }

  render() {
    return (
      <form className="form" onSubmit={this.handleSubmit}>
        <div className="form__title">Вход в систему</div>
        <label>
          Логин:
          <input
            className="form__input"
            type="text"
            name="login"
            value={this.state.login}
            onChange={this.handleChange}
            minLength="6"
            required
          />
        </label>
        <label>
          Пароль:
          <input
            className="form__input"
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
            required
          />
        </label>
        <div className="form__btn">
          <input className="btn" type="submit" value="Вход" />
          <Link className="btn" to="/registration">
            Регистрация
          </Link>
        </div>
      </form>
    );
  }
}

А теперь немного пояснений, что же не так. Очень важно научиться отлаживать свое приложение с самого начала, ставить точки останова, выводить в консоль - это очень полезно. В вашем начальном примере кода состояние компонента App успешно изменяется, однако ошибка у вас - в роутинге. Да, нет редиректов, и после того, как вы попадаете на страницу логина - у вас попросту ничего не происходит, у вас так и остается в адресной строке /login и всё, даже после логина вы там остаетесь. Поэтому я добавил немного разнообразия в роутинги и вы можете воспользоваться примером кода и попробовать у себя использовать данный подход.

Настоятельно рекомендую ознакомиться с документацией по роутингу:

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.