调用映射操作时出现类型错误-将操作映射到props react/redux

Question

我试图映射到道具的行动，但我得到一个错误：类型错误：_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

不要使用mapDispatchToProps。相反，只需将所有想要映射的动作包装在一个对象中，并将它们作为第二个参数传递给connect helper方法。

像这样< code>connect(mapStateToProps，{ update username })(user log in page)

希望这有帮助！

Answer 2

你可以在更新你的构造函数后检查一次吗，如下所示？

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