无法呈现身份验证页面

Question

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

App.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);
    };

    render() {
        let user = firebase.auth().currentUser;
        if (user) {
            return (
                <Router>
                    <Layout theme='dark'>
                        <Header mode="horizontal">
                            <div className='header-wrapper'>
                                <Title level={2} style={{"color": "rgb(166 173 180)"}}>Оберіть функцію:</Title>
                                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                                    <Menu.Item key="1">
                                        <Link to='/stocksList'>Довідник ЦП</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <Link to='/addClients'>Довідник клієнтів</Link>
                                    </Menu.Item>
                                </Menu>
                            </div>
                        </Header>
                        <Content>
                            <Switch>
                                <Route path="/stocksList">
                                    <AddStock/>
                                </Route>
                                <Route path="/addClients">
                                    <AddClient/>
                                </Route>
                                <Route path="/kuaForm">
                                    <KuaForm/>
                                </Route>
                                <Route path="/pifForm">
                                    <PifForm/>
                                </Route>
                            </Switch>
                        </Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Router>
            )
        } else {
            return (
                <Login signIn={this.signIn} onFinishaedFailed={this.onFinishFailed} handleChange={this.handleChange} signUp={this.signUp} />
            )
        }
    }
}

export default App;

登录.js

import React from 'react';
import { Form, Input, Button } from 'antd';
import { Typography  } from 'antd';

const { Title } = Typography;

export const Login = () => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };

    return (
        <div>
            <Title level={2} style={{ "color": "rgb(166 173 180)" }}>Для продовження роботи пройдіть автентифікацію.</Title>

            <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={props.signIn()}
                onFinishFailed={this.props.onFinishFailed()}
            >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input name='login' onChange={this.props.handleChange()}/>
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password name='password' onChange={this.props.handleChange()}/>
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        Увійти
                    </Button>

                    <Button type="primary" htmlType="button" onClick={this.props.signUp()}>
                        Зареєструватися
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

Answer 1

您正在调用 props，但您尚未在功能组件中定义它。

export const Login = (props) => {
...

}

Answer 2

由于Login是一个函数式组件，你需要像这样传入并定义props：const Login = (props) => {。然后您可以使用props.handleChange 和props.signUp 访问道具。

不需要像在基于类的组件中那样使用this，因为this 没有在功能组件内部定义。