Question

React和Redux仍然是绿色。我一直在圈子里努力解决这个问题，所以我正在分解并发布这个问题。昨天我实际上已经在进行这项工作，但现在我不知道该如何完成工作。

问题在于，RegistrationButton的onClick事件中的createUser（）操作似乎未在分派。 onClick函数正在触发，但是createUser从未触发。

一定要小一些。感谢您的关注。

import React, { Component } from "react";
import { connect } from "react-redux";
import "../../App.css";
import { nextStep, createUser } from "../../actions/registrationActions";

class RegistrationButton extends Component {
  render() {
    switch (this.props.step) {
      default:
      case 1:
      case 2:
        return (
          <button className="submit-reg-form-btn" onClick={this.props.nextStep}>
            Continue
          </button>
        );
      case 3:
        return (
          <button
            className="submit-reg-form-btn"
            onClick={(e) => {
              e.preventDefault();
              this.props.createUser({
                username: this.props.username,
                email: this.props.email,
                password: this.props.password,
                name:
                  String(this.props.firstname) +
                  " " +
                  String(this.props.lastname),
                birthdate: this.props.birthdate,
                gender: this.props.gender,
                preferredGender: this.props.preferredGender,
                liability: Boolean(this.props.liability),
                bio: this.props.bio,
                role: this.props.role,
                karma: this.props.karma,
                mentalState: this.props.mentalState,
              });
            }}
          >
            Complete Registration
          </button>
        );
    }
  }
}

const mapStateToProps = (state) => {
  const { registration } = state;
  return {
    step: registration.registrationStep,
    firstname: registration.firstname,
    lastname: registration.lastname,
    username: registration.username,
    email: registration.email,
    password: registration.password,
    birthdate: registration.birthdate,
    gender: registration.gender,
    preferredGender: registration.preferredGender,
    liability: registration.liability,
    mentalState: registration.mentalState,
    role: registration.role,
    bio: registration.bio,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    nextStep: (e) => {
      e.preventDefault();
      dispatch(nextStep());
    },
    createUser: (user) => {
      dispatch(createUser(user));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(RegistrationButton);

registrationActions.js

import axios from "axios";
import {
  SET_ERROR,
  REGISTRATION_SUCCESS,
  ...
} from "./types";

export const createUser = (user) => (dispatch) => {
  axios.post("/api/createUser", user).then((res) => {
    if (res.data.error !== "") {
      dispatch({
        type: SET_ERROR,
        payload: "failed to create user",
      });
    } else {
      dispatch({
        type: REGISTRATION_SUCCESS,
      });
    }
  });
};
....
....

registrationReducer.js

import {
  SHOW_REGISTRATION_STEP_1,
  SHOW_REGISTRATION_STEP_2,
  SHOW_REGISTRATION_STEP_3,
  NEXT_REGISTRATION_STEP,
  REGISTRATION_SUCCESS,
  SET_FIRST_NAME,
  SET_LAST_NAME,
  SET_USERNAME,
  SET_USER_EMAIL,
  SET_USER_PASSWORD,
  SET_USER_BIRTHDATE,
  SET_USER_GENDER,
  SET_PREFERRED_GENDER,
  SET_USER_LIABILITY,
  SET_USER_MENTAL_STATE,
  SET_USER_ROLE,
  SET_USER_BIO,
  SET_ERROR,
} from "../actions/types";

const initialState = {
  registrationStep: 1,
  error: "",
  registrationComplete: false,
  firstname: "",
  lastname: "",
  username: "",
  email: "",
  password: "",
  birthdate: "",
  gender: "",
  preferredGender: "",
  liability: "",
  mentalState: "",
  role: "",
  bio: "",
};

export default function (state = initialState, action) {
  switch (action.type) {
    case SHOW_REGISTRATION_STEP_1:
      return {
        ...state,
        registrationStep: 1,
      };
    case SHOW_REGISTRATION_STEP_2:
      return {
        ...state,
        registrationStep: 2,
      };
    case SHOW_REGISTRATION_STEP_3:
      return {
        ...state,
        registrationStep: 3,
      };
    case REGISTRATION_SUCCESS:
      return {
        ...state,
        error: "",
        registrationStep: 4,
        registrationComplete: true,
      };
    case SET_ERROR:
      return {
        ...state,
        error: action.payload,
      };
    ...
    ...
    default:
      return { ...state };
  }
}

reducers/index.js

import { createStore, applyMiddleware, combineReducers } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import ReduxThunk from "redux-thunk";
import authReducer from "./authReducer";
import errorReducer from "./errorReducer";
import registrationReducer from "./registrationReducer";

const rootReducer = combineReducers({
  auth: authReducer,
  errors: errorReducer,
  registration: registrationReducer,
});

export const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(ReduxThunk))
);

Answer 1

这是破坏代码的行

 onClick={this.props.createUser({

实际上，您在组件安装时正在调用该方法。您实际需要做的是

 onClick={() => this.props.createUser({

在那之后，您可能不需要处理“ e.preventDefault（）”事件。

LE（以下为更新的问题）使用

bindActionCreators

Redux中的

方法，用于包装动作创建者。最终版本可能是这样

const mapDispatchToProps = (dispatch) => bindActionCreators({
createUser,
nextStep,
}, dispatch)

希望有帮助。干杯。

Answer 2

在onClick属性中，您应该自己提供函数，而不要像以前那样调用她

正确的方法是

onClick={() => this.props.createUser(

或

onClick={this.props.createUser.bind(null, yourParam)}

mapDispatchToProps正常运行，但是调度的操作不会在onClick中触发

2 个答案: