Javascript 为什么当I'；我将动作传递给mapDispatchToProps？

tl；dr:在LoginForm中，

这个.props

是未定义的，尽管我在mapDispatchToProps中传入了操作

我已经在

connect

函数中设置了断点，操作正在使其进入connect函数中，但无论出于何种原因，在

handleSubmit

函数中，this.props未定义

我被难住了

我有一个单独的“注册”流程，它与下面的流程基本相同，并且工作非常完美

我基本上复制粘贴了注册代码，并将所有内容重命名为“login”，并出于任何原因略微修改了内容this.props未定义，即使我传递到mapDispatchToProps的内容似乎是正确的。

组成部分：

import React from 'react';
import { connect } from 'react-redux';

import { loginSubmit, loginUpdateField } from '../../redux/actions/login.actions';
import { TextInput } from '../../stories/TextInput';
import { Button } from '../../stories/Button';

export class LoginForm extends React.Component {
  // eslint-disable-next-line
  constructor(props) {
    super(props);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Props: ', this.props); // UNDEFINED!!!!!!
  }

  handleUpdateField(field, value) {
    // this.props.updateField(field, value);
  }

  render() {

    return (
      <form style={{ 'WebkitPerspective': '1000' }}>
        <TextInput label="Username" id="username" /> <br />
        <TextInput label="Password" id="password" type="password" /> <br /><br />

        <Button disabled={false} primary size="medium" onClick={this.handleSubmit.bind(this)} label="Ready for Takeoff" />
        <Button disabled={false} size="medium" onClick={() => alert} label="Cancel" />
      </form>
    );
  }
}

export default connect(
  null,
  { loginSubmit, loginUpdateField }
)(LoginForm);

减速器：

const initialState = {
  loginStatus: 'not_started',
  fieldValues: {
    username: '',
    password: '',
  },
  errors: {
    formValid: false,
    username: [],
    password: [],
  }
};

export default function (state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_UPDATE_FIELD':
      let newState = {
        ...state,
      };
      newState.fieldValues[action.payload.fieldName] = action.payload.fieldValue;

      return newState;

    case 'LOGIN_SUBMIT_BEGIN':
      return {
        ...state,
        signupStatus: 'pending'
      };

    case 'LOGIN_ERRORS':
      return {
        ...state,
        signupStatus: 'errors',
        errors: action.payload
      };

    case 'LOGIN_SUCCESS':
      return {
        ...state,
        signupStatus: 'success'
      };

    default:
      return state;
  }
}

组合减速器：

import { combineReducers } from 'redux';

import signup from './signup.reducers';
import user from './user.reducers';
import login from './login.reducers';

export default combineReducers({ login, user, signup});

LoginPage.js

import React from 'react';
import PropTypes from 'prop-types';

import { LoginForm } from '../features/LoginForm';
import './signup.css';

export const LoginPage = () => {
  return (
    <article>
      <section>
        <h2>Login!!</h2> <br /> <br />
        <LoginForm />
      </section>
    </article>
  );
};

LoginPage.propTypes = {
  user: PropTypes.shape({})
};

LoginPage.defaultProps = {
  user: null,
};

从“React”导入React；
从“道具类型”导入道具类型；
从“../features/LoginForm”导入{LoginForm}；
导入“./signup.css”；
导出常量登录页面=（）=>{
返回(
登录！！


);
};
LoginPage.propTypes={
用户：PropTypes.shape（{}）
};
LoginPage.defaultProps={
用户：null，
};

如果从该组件导入命名导出，则导入的是未连接的组件：

import React from 'react';
import { connect } from 'react-redux';

import { loginSubmit, loginUpdateField } from '../../redux/actions/login.actions';
import { TextInput } from '../../stories/TextInput';
import { Button } from '../../stories/Button';

export class LoginForm extends React.Component {
  // eslint-disable-next-line
  constructor(props) {
    super(props);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Props: ', this.props); // UNDEFINED!!!!!!
  }

  handleUpdateField(field, value) {
    // this.props.updateField(field, value);
  }

  render() {

    return (
      <form style={{ 'WebkitPerspective': '1000' }}>
        <TextInput label="Username" id="username" /> <br />
        <TextInput label="Password" id="password" type="password" /> <br /><br />

        <Button disabled={false} primary size="medium" onClick={this.handleSubmit.bind(this)} label="Ready for Takeoff" />
        <Button disabled={false} size="medium" onClick={() => alert} label="Cancel" />
      </form>
    );
  }
}

export default connect(
  null,
  { loginSubmit, loginUpdateField }
)(LoginForm);

从“/LoginForm”导入{LoginForm}；

由于redux连接的组件是默认导出，因此如果希望它是redux连接的版本，则必须确保导入默认导出

从“/LoginForm”导入LoginForm；

---

将来避免此错误的一种方法是，甚至不导出未连接的

LoginForm

组件。换句话说，您可以将类声明为

class LoginForm extends React.Component{…}

，而不是

export class LoginForm extends React.Component{…}

在哪里导入

LoginForm

？如果您无意中导入命名导出，您将无法连接到storeIs

this

handleSubmit中的组件？看起来应该是这样，因为你打电话给bind；但我的猜测是，这不是您所认为的。@Nick我更新了我的问题，以显示我正在导入LoginForm的位置。@rayhatfield我也认为可能是这样，但在反复检查

后，这
似乎是它应该是的：LoginForm组件。@Nick这就是问题所在！！请提交一个答案，这样我就可以接受它，并给你学分。还有，我不明白为什么这是个问题。你介意再解释一下吗？