Question

我正试图成为注册用户。在我的组件文件中，有填充状态的字段，然后在提交时应调用在操作中创建的注册函数，该操作之后应分派响应数据，如果成功则键入register成功，否则注册失败并分派错误。关键是，填写必填字段并单击注册按钮后，根本不会调用该函数。在检查网络中没有显示任何要调用的功能。我是第一次使用webpack，也许这是解决此问题的必要细节。

这是组件：

const Register = ({register}) => {
    const [formData, setFormData] = useState({
        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        password: '',
        privacy: false
    });

    const {privacy} = formData;

    const onChange = e => {
        setFormData({...formData, [e.target.name]: e.target.value})
    };

    const onRegister = (e) => {
        e.preventDefault();
        if (privacy){
            console.log('kari');
            register(formData);
        } else {
            console.log('error');
        }
    };

    const onPrivacyCheck = () => {
        setFormData({...formData, privacy: !privacy})
    };

    return (
        <Fragment>
            <div>
                <h1>Register</h1>
                <form onSubmit={e => onRegister(e)}>
                    <input type={'text'} name={'first_name'} onChange={e => onChange(e)}/>
                    <input type={'text'} name={'last_name'} onChange={e => onChange(e)}/>
                    <input type={'text'} name={'phone'} onChange={e => onChange(e)}/>
                    <input type={'text'} name={'email'} onChange={e => onChange(e)}/>
                    <input type={'password'} name={'password'} onChange={e => onChange(e)}/>
                    <br/>
                    <input type={'checkbox'} name={'privacy'} checked={privacy}
                           onClick={() => onPrivacyCheck()}/>
                    <label htmlFor="checkbox">Privacy Policy</label>
                    <br/>
                    <input type={"submit"} value={'Register'}/>
                </form>
            </div>
        </Fragment>
    )
};

Register.propTypes = {
    register: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
});

export default connect(mapStateToProps, {register})(Register);

这是动作：

export const register = (data) => async dispatch => {
    console.log(data);

    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };

    const body = JSON.stringify(data);

    try {
        const res = await axios.post('http://localhost:5000/api/users', body, config);

        dispatch({
            type: REGISTER_SUCCESS,
            payload: res.data
        });

        dispatch(setAlert('User registered successfully!', 'success'));
    } catch (e) {
        const errors = e.response.data.errors;

        if (errors) {
            errors.forEach(error => dispatch(
                setAlert(error.msg, 'danger')
            ));
        }

        dispatch({
            type: REGISTER_FAIL
        });
    }
};

这是减速器

import {
    REGISTER_SUCCESS,
    REGISTER_FAIL,
    USER_LOADED,
    AUTH_ERROR,
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    LOGOUT
} from "../actions/types";

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    loading: true,
    user: null
};

export default function (state = initialState, action) {
    const {type, payload} = action;

    switch (type) {
        case USER_LOADED:
            return {
                ...state,
                isAuthenticated: true,
                loading: false,
                user: payload
            };
        case REGISTER_SUCCESS:
        case LOGIN_SUCCESS:
            localStorage.setItem('token', payload.token);
            return {
                ...state,
                ...payload,
                isAuthenticated: true,
                loading: false
            };
        case REGISTER_FAIL:
        case AUTH_ERROR:
        case LOGIN_FAIL:
        case LOGOUT:
            localStorage.removeItem('token');
            return {
                ...state,
                token: null,
                isAuthenticated: false,
                loading: false
            };
        default:
            return state;
    }
}

Answer 1

好吧，我的解决方案是，使您的组件成为类，安排函数-在需要的地方添加this和this.setState并调用registerData函数形成您的操作：

import React, { Component, Fragment } from "react";
import {registerData} from "//Where the action file is"

class Register extends Component  {
    state= {
        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        password: '',
        privacy: false
    };


    onChange = e => {
        this.setState({[e.target.name]: e.target.value})
    };

    onRegister = (e) => {
        e.preventDefault();
        if (this.state.privacy){
            console.log('kari');
            this.props.registerData(formData);
        } else {
            console.log('error');
        }
    };

    onPrivacyCheck = () => {
        this.setState({ privacy: !privacy})
    };
   render() {
    return (
        <Fragment>
            <div>
                <h1>Register</h1>
                <form onSubmit={this.onRegister}>
                    <input type={'text'} name={'first_name'} onChange={e => onChange(e)}/>
                    <input type={'text'} name={'last_name'} onChange={e => onChange(e)}/>
                    <input type={'text'} name={'phone'} onChange={e => onChange(e)}/>
                    <input type={'text'} name={'email'} onChange={e => onChange(e)}/>
                    <input type={'password'} name={'password'} onChange={e => onChange(e)}/>
                    <br/>
                    <input type={'checkbox'} name={'privacy'} checked={privacy}
                           onClick={() => this.onPrivacyCheck()}/>
                    <label htmlFor="checkbox">Privacy Policy</label>
                    <br/>
                    <input type={"submit"} value={'Register'}/>
                </form>
            </div>
        </Fragment>
    )
 }
};

Register.propTypes = {
    register: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
});



export default connect(mapStateToProps, {registerData})(Register);

在您的表单中编写如下的onSubmit函数：

 <form onSubmit={this.onRegister}>

修改您的操作：

   export const registerData = data => dispatch => {
      const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        };
      axios
        .post('http://localhost:5000/api/users', data, config)
        .then(res => {
          dispatch({
            type: REGISTER_SUCCESS,
            payload: res.data
          });;
        })
        .catch(err => {
          dispatch({
            type: SET_ERRORS,
            payload: err.response
          });
        });
    };

这应该有效

为什么我的函数动作没有被调用？

1 个答案: