導入到redux表單后未采取任何操作

Question

這是我在React中的第一個項目。 從Udemy接受培訓之后，我已經完成了以下代碼，但是堅持將操作掛接到容器中（容器正確嗎？）

以下是我從不同的代碼片段中編譯的內容...我可以在父級中呈現該組件，然后單擊“登錄”按鈕，handleFormSubmit運行，並將用戶名和密碼登錄到控制台。 但似乎我還沒有弄清楚如何將自己的動作植入道具。 任何幫助最感激。

首先，來自控制台的錯誤消息：

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行的道具訪問您的loginForm函數：

this.props.loginUser

但是您實際上是在第5行的“操作”下導入它。 因此，第13行應該看起來像

actions.loginUser