问题将 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 的症结所在。

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

Problem connect Redux with parent props from React

reactjs

redux

redux-form

react-redux