Пропускаемые через React Route реквизиты не могут быть доступны дочернему компоненту - PullRequest
Новая
       22

Пропускаемые через React Route реквизиты не могут быть доступны дочернему компоненту

0 голосов
/ 08 мая 2019

У меня проблема с доступом к реквизиту, переданному по маршруту к дочернему компоненту. Я пытаюсь заполучить функцию аутентификации на странице приложения, чтобы я мог переключить ее на true, когда моя функция onLogin на странице входа получит правильный ответ. Любая помощь будет высоко оценена.

пожалуйста, найдите код ниже 

//App.js

import React, { Component } from "react";

//import TopNavigation from './components/topNavigation';
//import { BrowserRouter, Route, Switch } from "react-router-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import MainPage from "./Mainpage";
import LoginPage from "./components/pages/LoginPage";
//import ProtectedRoute from "./protected.route";
import "./styleFiles/index.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isAuthenticated: false
    };
    this.Authentication = this.Authentication.bind(this);
  }

  Authentication(e) {
    this.setState({ isAuthenticated: e });
  }

  render() {
    if (this.state.isAuthenticated === false) {
      return (
        <BrowserRouter>
          <div className="flexible-content ">
            <Route
              path="/login"
              render={props => <LoginPage test="helloworld" {...props} />}
            />
            <Route component={LoginPage} />
          </div>
        </BrowserRouter>
      );
    } else {
      return (
        <div className="flexible-content ">
          <Switch>
            <Route
              path="/"
              exact

              component={MainPage}
            />
            <Route component={MainPage} />
          </Switch>
        </div>
      );
    }
  }
}

export default App;

//login page

import React, { Component } from "react";
import logo from "../../assets/justLogo.svg";

import "../../styleFiles/loginCss.css";

class LoginPage extends Component {
  constructor(props) {
    super(props);
  }



  onLogin = event => {
    let reqBody = {
      email: "rpser1234@gmail.com",
      password: "rpser1234"
    };
    // event.preventDefault();
    fetch("http://localhost:8000/api/auth/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(reqBody)
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error("Something went wrong with your fetch");
        }
      })
      .then(json => {
        localStorage.setItem("jwtToken", json.token);
        console.log(this.props.test);
      });
  };

  render() {
    const {
      test,
      match: { params } 
    } = this.props;
    console.log(test);
    return (
      <div className="bodybg">
        <div className="login-form">
          <div className="form-header">
            <div className="user-logo">
              <img alt="MDB React Logo" className="img-fluid" src={logo} />
            </div>
            <div className="title">Login</div>
          </div>
          <div className="form-container">
            <div className="form-element">
              <label className="fa fa-user" />
              <input type="text" id="login-username" placeholder="Username" />
            </div>
            <div className="form-element">
              <label className="fa fa-key" />
              <input type="text" id="login-password" placeholder="Password" />
            </div>
            <div className="form-element">
              <button onClick={this.onVerify}>verify</button>
            </div>

            <div className="form-element forgot-link">
              <a href="http://www.google.com">Forgot password?</a>
            </div>
            <div className="form-element">
              <button onClick={this.onLogin}>login</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default LoginPage;

Я пытаюсь получить доступ к тестовой информации с loginPage, но безуспешно. Есть идеи, я ошибаюсь?

Ответы [ 3 ]

0 голосов
/ 08 мая 2019

Ваш подход не лучшая практика. Для таких целей лучше всего использовать redux + redux-thunk.

Если вы все еще хотите пойти по этому пути. Вы ошибаетесь здесь: 

 <Route
   path="/login"
   render={props => <LoginPage test={this.state.isAuthention} {...props} />}
 />

this.state.isAuthention заменить на this.state.isAuthenticated После этого вам необходимо отправить обратный вызов аутентификации через реквизиты и позвонить в fetch( ... ).then((result) => this.props.Authentication(result))

0 голосов
/ 08 мая 2019

Вы используете state для передачи function в качестве реквизита, 

<Route
   path="/login"
   render={props => <LoginPage test={this.state.Authentication} {...props} />} //Wrong way to pass function as prop
/>

Если вы хотите передать function as prop используйте это, Ref 

<Route
   path="/login"
   render={props => <LoginPage test={this.Authentication} {...props} />}
/>

Если вы хотите multiple routes for same component, тогда используйте атрибут exact вот так, отметьте this 

<Route 
  exact   //This will match exact path i.e. '/login'
  path="/login"
  render={props => <LoginPage test={this.Authentication} {...props} />}
/>
0 голосов
/ 08 мая 2019

Попробуйте: 

             <Route
              path="/login"
              render={props => <LoginPage test={this.state.isAuthenticated} {...props} />}
            />

У вас есть Аутентифицированный, а не Аутентификация.

...