调用映射操作时输入错误 - 对Props React/Redux映射操作

Question

我正在尝试将操作映射到道具，但是我遇到了一个错误： typeError：_this2.props.updateusername不是函数

一个人如何成功地将Redux操作映射到Props并成功地调用该功能？我没有看到任何其他Stackoverflow问题/答案中弹出此错误是一个简单的错误吗？.index或.app中的Redux设置错误？

我尝试过： - 导入而无需使用默认导出 - 具有不同格式的MapDispatchToprops（例如不使用BindActionCreators） - 修复错别字

• 组件：

  import { updateUsername } from "../../actions/user-actions";
  import React, { Component } from "react";
  import { InputText } from "primereact/inputtext";
  import { Button } from "primereact/button";
  import { Password } from "primereact/password";
  import "./UserLogin.css";
  import { connect } from "react-redux";
  import { bindActionCreators } from 'redux'
  export class UserLoginPage extends Component {
    constructor(props) {
      super(props);
      this.state = { //used to be using states so ill leave these here for now
        username: "", 
        password: "",
        renderTryAgain: false
      };
      this.checkLoginDetails.bind(this.checkLoginDetails);
    }
    async checkLoginDetails() {
      ...
    }
    render() {
      const usernameBox = (
        <InputText
          ...
          value={this.props.username}
          onChange={e => this.props.updateUsername(e.target.value)}
        />
      );
      const passwordBox = (
        <Password
          ...
        />
      );
      const loginButton = (
        <Button
          ...
        />
      );
      return (
        <header className="User-login">
          <p>Dashboard User Login</p>
          <div className="p-grid">
            <div className="p-col">{usernameBox}</div>
            <div className="p-col">{passwordBox}</div>
            <div className="p-col">{loginButton}</div>
          </div>
        </header>
      );
    }
  }
  const mapStateToProps = state => ({
    username: state.username
  });
  const mapDispatchToProps = dispatch => bindActionCreators(
    {
      updateUsername,
    },
    dispatch,
  )
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(UserLoginPage);
  

还原器：

import { UPDATE_USERNAME} from '../actions/user-actions'
export function passReducer(state = "", {type, payload}) {
  switch (type) {
    case true:
      return payload
    default:
      return state
  }
}
export function usernameReducer(state = '', {type, payload}) {
  switch (type) {
    case UPDATE_USERNAME:
      return payload.username
    default:
      return state
  }
}
export default { passReducer, usernameReducer };

• 动作：

  export const UPDATE_USERNAME = 'username:updateUsername'
  export function updateUsername(newUsername){
      return {
          type: UPDATE_USERNAME,
          payload: {
              username: newUsername
          }
      }
  }
  export default {UPDATE_USERNAME, updateUsername}
  

非常感谢

Answer 1

在下面更新构造函数后可以检查一次吗？

constructor(props) {
    super(props);
    //...
  }

Answer 2

不要使用mapdispatchtoprops。取而代

喜欢此connect(mapStateToProps, { updateUsername })(UserLoginPage)

希望这会有所帮助！