Проблема подключения Redux с родительским реквизитом из React - PullRequest
Новая
       40

Проблема подключения Redux с родительским реквизитом из React

0 голосов
/ 03 октября 2018

В течение нескольких дней я пытался решить проблему между подключением редуктора и реквизитом родительского компонента.Я использую избыточность в своем дочернем компоненте и в то же время использую реквизиты для вызова функции handlechange и состояния родительского компонента.

Когда в дочернем компоненте use connect неправильно обновляет this.props.args,однако у родителя проблем нет.Затем у меня есть проверка, чтобы, когда все поля были заполнены, моя кнопка отправки была активирована.

Дополнительно реализуйте состояние и функцию в родительском компоненте, чтобы обнаружить движение мыши и передать егоДочерний компонент, чтобы убрать некоторые сомнения, удивителен тем, что в этом случае, если он обнаруживает изменения в this.props.mouse, и гораздо реже, когда я заполняю поле и затем перемещаю мышь, мой this.props.args вдочерний компонент, если он обновлен.Я немного смущен и не знаю, что из-за этого.

Родительский компонент: 

import React, { Component } from "react";
import SignUp from './login/SignUp';


class Login extends Component {

    state = {
        showRegister: true,
        argsSignup: {},
        move: {},
    }

    handleChange = (ev, input) => {
        let argsSignup = this.state.argsSignup;
        argsSignup[input.name] = input.value;
        this.setState({argsSignup});
        //console.log(this.state.argsSignup);
    }

    handleMouseMove = (event) => {
        this.setState({
        move: {
                x: event.clientX,
                y: event.clientY
        }
        });
    }

    render() {
        const {showRegister, argsSignup, move} = this.state;

        return(
            <div onMouseMove={this.handleMouseMove}>
                {showRegister && <SignUp args={argsSignup} handleChange={this.handleChange} mouse={move} />}                                            
            </div>
        );                
    }
}


export default (Login);

Дочерний компонент (с подключением): 

import React, { Component } from "react";
import { connect } from "react-redux";
import { Form, Button } from 'semantic-ui-react';
import { signInFacebook } from "../../redux/createActions";
class SignUp extends Component {    

    render() {
        const {args, handleChange, signInFacebook} = this.props;
        return(
            <React.Fragment >           
                <Form >
                    <Form.Field>
                        <Form.Input name='email' onChange={handleChange} placeholder='numero de movil o correo electronico' />                        
                    </Form.Field>
                    <Form.Field>
                        <Form.Input name='name' onChange={handleChange} placeholder='Nombre completo'/>                        
                    </Form.Field>
                    <Form.Field>
                        <Form.Input name='username' onChange={handleChange} placeholder='Nombre de usuario' />
                    </Form.Field>
                    <Form.Field>
                        <Form.Input name='password' onChange={handleChange} type="password" placeholder='contraseña' />
                    </Form.Field>
                    <Button 
                        type='submit' 
                        disabled={!args.email || !args.username || !args.name || !args.password }
                        primary 
                        fluid>
                            Regístrate
                    </Button>                        
                </Form>
                <button onClick={signInFacebook}>Inicia sesion con Facebook</button>
            </React.Fragment>
        )
    }
}


export default connect(null, {signInFacebook})(SignUp);

С другой стороны, если я удаляю соединение из моего дочернего компонента, все прекрасно работает, и если он обнаруживает изменения this.props.args

Дочерний компонент (без подключения): 

import React, { Component } from "react";
import { connect } from "react-redux";
import { Form, Button } from 'semantic-ui-react';
import { signInFacebook } from "../../redux/createActions";
class SignUp extends Component {    

    render() {
        const {args, handleChange, signInFacebook} = this.props;
        return(
            <React.Fragment >           
                <Form >
                    <Form.Field>
                        <Form.Input name='email' onChange={handleChange} placeholder='numero de movil o correo electronico' />                        
                    </Form.Field>
                    <Form.Field>
                        <Form.Input name='name' onChange={handleChange} placeholder='Nombre completo'/>                        
                    </Form.Field>
                    <Form.Field>
                        <Form.Input name='username' onChange={handleChange} placeholder='Nombre de usuario' />
                    </Form.Field>
                    <Form.Field>
                        <Form.Input name='password' onChange={handleChange} type="password" placeholder='contraseña' />
                    </Form.Field>
                    <Button 
                        type='submit' 
                        disabled={!args.email || !args.username || !args.name || !args.password }
                        primary 
                        fluid>
                            Regístrate
                    </Button>                        
                </Form>
                <button onClick={signInFacebook}>Inicia sesion con Facebook</button>
            </React.Fragment>
        )
    }
}


export default (SignUp);

Я ценю вашу помощь с этого момента.Спасибо !!

1 Ответ

0 голосов
/ 03 октября 2018

Когда вы connect используете свой компонент, вы устанавливаете соединение с Redux, и реквизиты этого компонента будут питаться всем состоянием приложения.

export default connect(mapStateToProps, {signInFacebook})(SignUp);

Ваш первый параметр для функции соединения содержит функцию mapStateToProps, которая по существу отображает состояние приложения на props компонента SignUp.Сохранение этого null означает, что вы ожидаете объект состояния null от Redux, и, следовательно, вы не можете получить желаемый результат в this.props.args.Удаление оператора connect делает props, которые передаются дочернему компоненту, доступными через this.props.В этом суть Redux.

...