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

Question

tl;dr：在 LoginForm 中，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);
        });
    }
  }
};

减速机：

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

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