无法呈现授权页面

Question

我正在尝试设置 firebase 身份验证。我有两个组成部分。第一个是带有 firebase.auth().currentUser 的应用程序，我正在检查是否有登录用户，然后如果有这样的用户，我会呈现页面，如果没有，我会呈现登录页面。第二个组件我只是从父级获取处理程序并尝试呈现登录页面。现在我只看到空白页和错误“'props' 未定义”。请帮我解决它。

应用程序.js

import React, {Component} from "react";

import {

    BrowserRouter as Router,

    Switch,

    Route,

    Link

} from "react-router-dom";

import { Layout } from 'antd';

import AddStock from './components/stocksDB/addStock';

import { Typography, Menu } from 'antd';

import 'antd/dist/antd.css';

import './App.css';

import AddClient from './components/clients/addClient.js';

import PifForm from './components/clients/pif/pifForm';

import KuaForm from './components/clients/pif/kuaForm';

import firebase from './firebase.js';

import {Login} from './components/login.js'

const { Title } = Typography;

const {Header, Footer, Content} = Layout;

class App extends Component {

    constructor(props){

        super(props);

        this.state = {

            login: '',

            password: ''

        }

    }

    handleChange = (event) => {

        const target = event.target;

        const name = target.name;

        this.setState({

            [name]: target.value

        }, () => {console.log(name, this.state)})

    };

    signUp = () => {

        firebase.auth().createUserWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {

            console.log(error);

        })

    };

    signIn = () => {

        firebase.auth().signInWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {

            console.log(error);

        })

    };

    onFinishFailed = errorInfo => {

        console.log('Failed:', errorInfo);

    };

Answer 1

由于Login是功能组件，您需要像这样传入并定义道具：const Login = (props) => {. props.handleChange然后，您可以使用和访问道具props.signUp。无需在功能组件内部未定义的this基于类的组件中使用 like 。this

Answer 2

你正在调用 props 但你还没有在你的功能组件中定义它。export const Login = (props) => { ... }