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

Question

我这几天一直在尝试解决 redux 的 connect 和父组件的 props 之间的问题。我在子组件中使用redux，同时使用props来调用handlechange函数和父组件的状态。

在子组件中使用 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);

从现在开始感谢您的帮助。谢谢！！

Answer 1

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

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

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