• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何在React JS中使用Redux和Axios?

JavaScript 来源:Olympike Soft 5次浏览

这是我的登录页面:如何在React JS中使用Redux和Axios?

class Login extends Component { 

    /*define constructor for state props*/ 
    constructor() { 
    super(); 

    this.state = { 
     email: '', 
     password: '' 
    }; 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 

    /*Define the after submit form*/ 
    handleSubmit(e) { 
     // Stop browser from submitting the form. 
     e.preventDefault(); 

     this.form.validateFields(); 

      if (!this.form.isValid()) { 
      console.log("Not valid arguments"); 
      } else { 

    This is my function for Axios post values 
     Validate here or directly when setting state. 
     Then send a POST request to your endpoint. 

     axios.post('http//127.0.0.1:8000/user/login', { 
      email: this.state.email, 
      password: this.state.password 
     }) 
     .then(function(response) { 
      /*response from json*/ 
      console.log(response); 
     }) 
     .catch(function(error) { 
      console.log(error); 
     }); 
     } 
    } 

    handleChange(e) { 

     this.form.validateFields(e.currentTarget); 

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

    render() { 
    return(
     <div className="container"> 
     <h3 className="jumbotron">Redux Form Validation</h3> 
     <FormCode onSubmit={this.submit} /> 
    </div> 

这是使用终极版的表单

在前面定义的验证我的验证功能

const validate = values => { const errors = {} if (!values.password) { errors.password = ‘Required’ } else if (values.password.length > 15) { errors.password = ‘Must be 15 characters or less’ } if (!values.email) { errors.email = ‘Required’ } else if (!/^[A-Z0-9._%+-][email protected][A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) { errors.email = ‘Invalid email address’ } return errors }

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
     <label className="control-label">{label}</label> 
     <div> 
     <input {...input} placeholder={label} type={type} className="form-control" /> 
     {touched && ((error && <span className="text-danger">{error}</span>) || (warning && 

{warning}))} )

let FormCode = props => { 
    const { handleSubmit, pristine, submitting } = props; 
    return (
    <form onSubmit={ handleSubmit }> 
     <div className="form-group"> 
     <Field name="firstName" component={renderField} label="First Name" /> 
     </div> 
     <div className="form-group"> 
     <Field name="lastName" component={renderField} label="Last Name" /> 
     </div> 
     <div className="form-group"> 
     <Field name="email" component={renderField} label="Email" /> 
     </div> 
     <div className="form-group"> 
     <button type="submit" disabled={pristine || submitting} className="btn btn-primary">Submit</button> 
     </div> 
    </form> 
) 
} 
FormCode = reduxForm({ 
    form: 'contact', 
    validate, 
})(FormCode); 
export default FormCode; 

I’m收到此错误:

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop


===========解决方案如下:

上述解决方案将工作。无论如何,我想离开你我的意见。

首先,您不应该混合使用setState和Redux。如果您要使用Redux,那么更好地处理Redux上的所有应用程序状态。

然后,在您的React组件中,您只能调用Redux的操作。假设您有一个名为loginWithEmailAndPassword的操作。您提交功能会是这样的:

handleSubmit(e) { 
    e.preventDefault(); 

    // There is not need to pass email and password since you have 
    // those values in "state". 
    this.props.loginWithEmailAndPassword(); 
} 

而且你的终极版动作会是这样的:

export function loginWithEmailAndPassword() { 
    return (dispatch, getState) => { 
    // Get email and password from state. 

    return axios.post('YOUR_URL', { email, password }) 
     .then((success) => success && dispatch(someNextAction())); 
    }; 
} 

这是超级超级快写的,所以我不知道它是否工作。这只是“伪代码”,解释了我将如何为您的问题管理解决方案。

看看getFormValues还原形式(https://redux-form.com/6.1.0/docs/api/selectors.md)。

希望它有帮助。 干杯。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)