Impossible de rendre la page d'authentification

Question

J'essaye de définir l'authentification Firebase. J'ai deux composants. Le premier est App ici avec firebase.auth (). CurrentUser Je vérifie s'il y a un utilisateur connecté et après cela je rend la page s'il y a un tel utilisateur, sinon je rend une page de connexion. Le deuxième composant, je reçois juste des gestionnaires du parent et j'essaye de rendre la page de connexion. Maintenant, je vois juste une page vierge et une erreur "'props' is not defined". S'il vous plaît, aidez-moi à résoudre ce problème.

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;

Login.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

Depuis Loginest un composant fonctionnel, vous devez passer et définir les accessoires comme ceci: const Login = (props) => {. Vous pouvez ensuite accéder aux accessoires en utilisant props.handleChangeet props.signUp.

Pas besoin d'utiliser thiscomme dans le composant basé sur les classes car il thisn'est pas défini dans le composant fonctionnel.

Answer 2

Vous appelez des accessoires mais vous ne les avez pas définis dans votre composant fonctionnel.

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

}