问题将Redux与来自React的父道具连接起来

Question

我已经尝试了几天来解决redux连接和父组件的道具之间的问题。我在我的子组件中使用redux，同时使用props来调用handlechange函数和父组件的状态。

当在子组件中使用connect时，不会正确更新this.props.args，但是在父组件中没有问题。然后我进行了验证，以便在完成所有字段后，我的提交按钮将被激活。

另外在父组件中实现一个状态和一个函数来检测鼠标的移动并将其传递给子组件，以清除一些疑问，令人惊奇的是，在这种情况下，如果它检测到this.props.mouse和更为罕见的是当我填充一个字段然后移动鼠标时，如果更新了子组件中的my.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);

从现在开始，我感谢你的帮助。谢谢！！

Answer 1

当您对组件进行connect时，您正在与Redux建立连接，并且该组件的props将由整个应用程序状态提供。

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

connect函数的第一个参数包含mapStateToProps函数，该函数实际上将应用程序状态映射到props组件的SignUp。保持null意味着你期待Redux的null状态对象，因此你无法在this.props.args中获得所需的结果。删除connect语句使传递给子组件的props可以通过this.props访问。这是Redux的关键。