Aquí podría ser tu PUBLICIDAD


TypeError no detectada: No se puede leer la propiedad 'valor' de la aplicación indefinida Reaccionar

votos
0

Soy bastante nuevo al aprendizaje reaccionar y estoy utilizando un código estándar de reaccionar https://github.com/btomashvili/react-redux-firebase-boilerplate . Estoy teniendo problemas para conseguir que comenzó, he puesto base de fuego y necesita algo de ayuda para superar este error. Creo que yo debería usar el método de enlace en algún lugar, pero no estoy muy seguro. Cualquier ayuda sería muy apreciada gracias a todos! =)

error:

register.jsx:19 Uncaught TypeError: Cannot read property 'value' of undefined
at UserRegister.onFormSubmit (register.jsx:19)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:71)
at executeDispatch (EventPluginUtils.js:79)
at Object.executeDispatchesInOrder (EventPluginUtils.js:102)
at executeDispatchesAndRelease (EventPluginHub.js:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
at Array.forEach (<anonymous>)
at forEachAccumulated (forEachAccumulated.js:23)
at Object.processEventQueue (EventPluginHub.js:259)
at runEventQueueInBatch (ReactEventEmitterMixin.js:18)

código:

import React, { Component } from 'react';
import { browserHistory } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { registerUser } from '../../actions/firebase_actions';

class UserRegister extends Component {
    constructor(props) {
        super(props);
        this.onFormSubmit = this.onFormSubmit.bind(this);
        this.state = {
            message: '',
        };
    }

    onFormSubmit(event) {
        event.preventDefault();

        const email = this.email.value;
        const password = this.password.value;
        this.registerUser({ email, password }).then((data) => {
            if (data.payload.errorCode) {
                this.setState({ message: data.payload.errorMessage })
              ;
            } else {
                browserHistory.push('/profile');
            }
        }
    );
    }

    render() {
        return (
            <div className=col-md-4>
                <form id=frmRegister role=form onSubmit={this.onFormSubmit}>
                    <p>{this.state.message}</p>
                    <h2>Register</h2>
                    <div className=form-group>
                        <label htmlFor=txtRegEmail>Email address</label>
                        <input
                          type=email className=form-control ref=email id=txtEmail placeholder=Enter email
                          name=email
                        />
                    </div>
                    <div className=form-group>
                        <label htmlFor=txtRegPass>Password</label>
                        <input
                          type=password className=form-control ref=password id=txtPass placeholder=Password
                          name=password
                        />
                    </div>
                    <button type=submit className=btn btn-default>Register</button>
                    <br /> <br />

                    <a
                      href=# className=btn btn-block btn-social btn-facebook onClick={() => {
                          this.loginWithProvider('facebook');
                      }} data-provider=facebook
                    >Facebook</a>
                    <a
                      href=# className=btn btn-block btn-social btn-twitter onClick={() => {
                          this.loginWithProvider('twitter');
                      }} data-provider=twitter
                    >Twitter</a>
                    <a
                      href=# className=btn btn-block btn-social btn-google onClick={() => {
                          this.loginWithProvider('google');
                      }} data-provider=twitter
                    >Google</a>
                    <a
                      href=# className=btn btn-block btn-social btn-github onClick={() => {
                          this.loginWithProvider('github');
                      }} data-provider=twitter
                    >Github</a>

                </form>
            </div>
        );
    }

}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        registerUser,
    }, dispatch);
}

function mapStateToProps(state) {
    return { currentUser: state.currentUser };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserRegister);
Publicado el 03/06/2018 a las 02:16
fuente por usuario Chris Kelly
En otros idiomas...        العربية       

2 respuestas

votos
0

Esta es una mala práctica. Sólo se debe inyectar a través de valores: onChange={e => this.setState({email: e.target.value})}como ya se ha mencionado anteriormente.

Le sugiero que comience con una plancha de caldera limpia (crear una reacción aplicación es el mejor comienzo de la OMI) y la primera configuración de un estado, por ejemplo, el nombre de usuario / correo electrónico. Entrar en la consola, incluso antes de intentar enviar a base de fuego. De esta manera, siempre asegúrese de que su aplicación en sí está funcionando bien. Por lo demás es siempre difícil decir donde el tema es realmente viniendo.

Escribí para usted cómo se debe abordar este asunto un pequeño fragmento de código, que se puede encontrar aquí:

Editar zn460o3xpx

Haga clic en la parte superior derecha para abrir la aplicación en una nueva ventana (símbolo en la parte superior derecha dentro del navegador del editor) y abrir la consola. Cuando se escribe en su correo electrónico, que se registra en enviar. Le sugiero que permite copiar esto y añadir todos los valores que desee para iniciar la sesión (contraseña, etc.) y la primera siempre se registran estos en la consola. Si esto funciona, añadir su base de fuego de autenticación y tratar de añadir la función de impulso para la base de datos.

¡Saludos!

Respondida el 03/06/2018 a las 08:01
fuente por usuario Prometheus


Aquí podría ser tu PUBLICIDAD


votos
0

Trate de utilizar el estado para mantener el valor de la entrada de texto

import React, { Component } from 'react';
import { browserHistory } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { registerUser } from '../../actions/firebase_actions';

class UserRegister extends Component {
    constructor(props) {
        super(props);
        this.onFormSubmit = this.onFormSubmit.bind(this);
        this.state = {
            message: '',
            email: '',     // Add
            password: '',  // Add
        };
    }

    onFormSubmit(event) {
        event.preventDefault();

        const email = this.state.email;         // Change
        const password = this.state.password;   // Change
        registerUser({ email, password }).then((data) => {  // change
            if (data.payload.errorCode) {
                this.setState({ message: data.payload.errorMessage })
              ;
            } else {
                browserHistory.push('/profile');
            }
        }
    );
    }

    render() {
        return (
            <div className="col-md-4">
                <form id="frmRegister" role="form" onSubmit={this.onFormSubmit}>
                    <p>{this.state.message}</p>
                    <h2>Register</h2>
                    <div className="form-group">
                        <label htmlFor="txtRegEmail">Email address</label>
                        <input
                          type="email" className="form-control" ref="email" id="txtEmail" placeholder="Enter email"
                          name="email" value={this.state.email} onChange={e => this.setState({email: e.target.value})}    // Change
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="txtRegPass">Password</label>
                        <input
                          type="password" className="form-control" ref="password" id="txtPass" placeholder="Password"
                          name="password" value={this.state.password} onChange={e => this.setState({password: e.target.value})} // Change
                        />
                    </div>
                    <button type="submit" className="btn btn-default">Register</button>
                    <br /> <br />

                    <a
                      href="#" className="btn btn-block btn-social btn-facebook" onClick={() => {
                          this.loginWithProvider('facebook');
                      }} data-provider="facebook"
                    >Facebook</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-twitter" onClick={() => {
                          this.loginWithProvider('twitter');
                      }} data-provider="twitter"
                    >Twitter</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-google" onClick={() => {
                          this.loginWithProvider('google');
                      }} data-provider="twitter"
                    >Google</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-github" onClick={() => {
                          this.loginWithProvider('github');
                      }} data-provider="twitter"
                    >Github</a>

                </form>
            </div>
        );
    }

}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        registerUser,
    }, dispatch);
}

function mapStateToProps(state) {
    return { currentUser: state.currentUser };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserRegister);
Respondida el 03/06/2018 a las 05:57
fuente por usuario Kishan Mundha