Question

这是我在React的第一个项目。在接受了Udemy的培训后，我已经达到了以下代码，但仍坚持将动作挂钩到容器中（容器是否正确？）

以下是我从不同的代码片段编译的内容...我可以在父级中获取组件，当我点击“登录”按钮时，handleFormSubmit运行并记录用户名＆amp;密码进入控制台。但似乎我还没弄明白我的动作是如何植入道具的。任何最感谢的帮助。

首先来自控制台的错误消息：

Uncaught TypeError: this.props.loginUser is not a function
at Login.handleFormSubmit (bundle.js:49715)

登录表单（/src/components/auth/login.js）：

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import RaisedButton from 'material-ui/RaisedButton';
import { TextField } from 'redux-form-material-ui';
import * as actions from '../../actions/index';

const required = value => value==null ?'Required': undefined;

class Login extends Component {
  handleFormSubmit({username, password}) {
    console.log(username, password);

    this.props.loginUser({username, password});
  }

  render () {
    const {handleSubmit, fields: {username, password }} = this.props;


    return (
    <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
      <Field {...username}
             name="username"
             validate={required}
             component={TextField}
             hintText="Username"/><br />
      <Field {...password} name="password"
             validate={required}
             component={TextField}
             hintText="Password"
             type="password"/><br />
      <RaisedButton
             primary
             type="submit"
             label="Login"/>
    </form>
    )
  }
}

export default reduxForm({
  form: 'login',
  fields: ['username', 'password'],
}, null, actions)(Login)

然后我的行动（/src/actions/index.js）如下：

import * as constants from '../config/constants';
import axios from 'axios';

export function loginUser({username, password}) {

  return function (dispatch) {

    // Submit details to server
    axios.post(`${constants.ROOT_URL}/login`, { username, password});


    // if good request
    // - update authenticated state
    // - save JWT token
    // - redirect to the route

    // if bad request
    // - show error

  }
}

我在这里使用的第三个文件是常量（/src/config/constants.js）

export const ROOT_URL = 'http://x.x.x.x/api';

你擅长React＆amp;终极版？请帮助：）

已编辑 - 以下是最终的工作原理。错误是由于旧版React的代码使用

登录表单（/src/components/auth/login.js）：

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import RaisedButton from 'material-ui/RaisedButton';
import { TextField } from 'redux-form-material-ui';
import {loginUser} from '../../actions/index';


const required = value => value==null ?'Required': undefined;

class Login extends Component {
  handleFormSubmit({username, password}) {
    console.log(username, password);

    this.props.loginUser({username, password});
  }

  render () {
    const {handleSubmit, fields: {username, password }} = this.props;


    return (
    <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
      <Field {...username}
             name="username"
             validate={required}
             component={TextField}
             hintText="Username"/><br />
      <Field {...password} name="password"
             validate={required}
             component={TextField}
             hintText="Password"
             type="password"/><br />
      <RaisedButton
             primary
             type="submit"
             label="Login"/>
    </form>
    )
  }
}

Login = reduxForm({
  form: 'login',
  fields: ['username', 'password'],
})(Login)

export default Login = connect(null, {loginUser} )(Login)

Answer 1

您正尝试从第13行的道具中访问您的loginForm函数：

this.props.loginUser

但您实际上是在行动下的第5行导入它。因此，第13行应该看起来像

actions.loginUser

导入到redux表单后未执行操作

1 个答案: