Как визуализировать состояние непосредственно после его установки? - PullRequest
Новая
       11

Как визуализировать состояние непосредственно после его установки?

1 голос
/ 23 апреля 2020

Введение : я очень новичок в ReactJS ( Я только начал неделю go), но я не использую это как извините, так что, пожалуйста, go жёстко, если есть что-то, чего я не понимаю.

Аннотация : Я пытаюсь реализовать Защищенные маршруты.

Фон : При монтировании компонента Защищенный маршрут componentDidMount() вызывает функцию с именем isAuthenticated(), которая изменяет состояние поля с именем isAuthenticated. Это то же поле, которое я проверяю, чтобы определить, видит ли пользователь Защищенный компонент или перенаправляется обратно на страницу входа.

Проблема : Каждый раз, когда я посещаю Защищенный маршрут, называемый CreatePost, мои журналы показывают, что isAuthenticated() вызывается после componentDidMount(), но я не уверен, почему мой пользовательский интерфейс не отражает эти новые изменения, чтобы показать пользователю аутентифицированный маршрут.

Вопрос : Может кто-нибудь помочь или порекомендовать лучшую стратегию, которую я не рассматривал? Я действительно ценю это.

Примечание : Если я объявлю поле this.state.isAuthenticated в моем конструкторе как истинное, я увижу свой Защищенный маршрут, но это не моя цель. Надеюсь, это поможет в диагностике проблемы.

Приложение. js: 

import React, {Component} from 'react'
import './App.css'

import Signup from './components/Signup'
import Login from './components/Login'
import Feed from './components/Feed'
import CreatePost from './components/Createpost' 
import ProtectedRoute from './components/Protectedroute'

import {
    BrowserRouter as Router,
    Switch,
    Link,
    Route,
    Redirect
} from 'react-router-dom'


class App extends Component {
    render() {
        return(
            <Router>
                <div>
                    <Link to ='/signup'>Signup</Link>
                    <br />
                    <Link to = '/login'>Login</Link>
                    <br />
                    <Link to ='/create-post'>Create Post</Link>
                    <br />
                    <Link to ='/feed'>Feed</Link>
                </div>
                <Switch>
                    <Route path = '/signup' component = {Signup} />
                    <Route path = '/login' component = {Login} />
                    <Route path = '/feed' component = {Feed} />
                    <ProtectedRoute path = '/create-post' component = {CreatePost} />
                </Switch>
            </Router>
        )
    }
}

export default App

ProtectedRoute. js

import React, {Component} from 'react'
import { Redirect } from 'react-router-dom'


class ProtectedRoute extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isAuthenticated: false
        }

        this.isAuthenticated = this.isAuthenticated.bind(this)
    }

    componentDidMount() {
        console.log('--componentDidMount--')
        this.isAuthenticated()
    }

    isAuthenticated() {
        console.log('--isAuthenticated--')
        this.setState({isAuthenticated: true})
    }
    render() {
        const Component = this.props.component

        return this.state.isAuthenticated ? (<Component />) : (<Redirect to = '/login' />)
    }
}

export default ProtectedRoute

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Вместо установки состояния внутри компонента для этого вызова API попытайтесь создать функцию и затем вернуть ответ API как true или success 

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";

class ProtectedRoute extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isAuthenticated: false
    };

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

  componentDidMount() {
    console.log("--componentDidMount--");
    this.isAuthenticated();
  }

  isAuthenticated() {
    console.log("--isAuthenticated--");
    // Authentiction logic
    return true;
  }
  render() {
    const Component = this.props.component;

    return (
      <Route
        render={props =>
          this.isAuthenticated() ? (
            <Component {...props} />
          ) : (
            <Redirect to="/login" />
          )
        }
      />
    );
  }
}

export default ProtectedRoute;
0 голосов
/ 23 апреля 2020

Похоже, проблема здесь в том, что setState isyn c. Случается так, что при первом рендеринге this.state.isAuthenticated имеет значение false и, следовательно, немедленно перенаправляет. Вы можете ввести состояние загрузки, которое поможет вам отложить рендеринг компонента \ перенаправления только после того, как будет установлено состояние как загрузки, так и isAuthenticated. В общем, никогда не ожидайте, что setState изменит состояние немедленно синхронно.

...