javascript - 当我将操作传递给 mapDispatchToProps 时，为什么 this.props 未定义？

Question

tl;博士:在登录表单中，this.props尽管我在 mapDispatchToProps 中传递了操作，但未定义。
我在 connect 中设置了断点函数，并且该操作将其变为连接函数，但无论出于何种原因，在 handleSubmit函数，this.props 未定义。
我难住了。
我有一个单独的“注册”流程，与我在下面的流程基本相同，而且效果很好。
我基本上复制粘贴了注册代码，并将所有内容重命名为“登录”，并稍微修改了一些内容，无论出于何种原因 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);

那个行动:

export const loginSubmit = (fieldValues) => {
  return dispatch => {
    dispatch(loginSubmitBegin);

    let errors = isFormValid(fieldValues);

    if (!errors.formValid) {
      dispatch(loginErrors(errors));
    } else {
      axios
        .post(`https://api.mydomain.io/login`, fieldValues, { headers: { "Access-Control-Allow-Origin": "*", } })
        .then(res => {
          dispatch(loginSuccess({ username: 'testuser' }));
        })
        .catch(err => {
          handleErr(err.response.data.error);
        });
    }
  }
};

reducer :

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;
  }
}

组合 reducer :

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});

登录页面.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,
};

Answer 1

如果您从此组件导入命名导出，那么您正在导入未连接的组件:

import { LoginForm } from "./LoginForm";

由于 redux-connected 组件是默认导出，因此如果您希望它是 redux-connected 版本，则必须确保导入默认导出。

import LoginForm from "./LoginForm";

将来避免此错误的一种方法是甚至不导出未连接的 LoginForm。零件。换句话说，您可以将类声明为 class LoginForm extends React.Component { ... }而不是 export class LoginForm extends React.Component { ... } .