Question

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

在子组件中使用connect时，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函数，该函数实质上将应用程序状态映射到props组件的SignUp。保留null意味着您期望Redux提供null状态对象，因此无法在this.props.args中获得所需的结果。删除connect语句使props可以通过this.props向下传递到子组件。这就是Redux的症结所在。

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

1 个答案: