javascript - 导入 redux 表单后未拾取操作

Question

这是我在 React 中的第一个项目。从 Udemy 接受培训后，我已经实现了以下代码，但仍停留在将操作挂接到容器中(容器是正确的吗？)

下面是我从不同的代码片段编译的内容...我可以在父级中呈现组件，当我点击登录按钮时，handleFormSubmit 运行并将用户名和密码记录到控制台中。但我似乎还没有弄清楚如何将我的 Action 植入到 Prop 中。非常感谢任何帮助。

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

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 和 Redux 吗？请帮忙:)

已编辑 - 以下是最终有效的内容。错误是由于旧版本 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 行的 props 访问您的 loginForm 函数:

this.props.loginUser

但您实际上是在操作下的第 5 行导入它。所以第 13 行应该看起来像

actions.loginUser