Ошибка типа при вызове сопоставленного действия - сопоставление действий с реквизитами реагирует / уменьшает - PullRequest
Новая
       6

Ошибка типа при вызове сопоставленного действия - сопоставление действий с реквизитами реагирует / уменьшает

0 голосов
/ 25 февраля 2019

Я пытаюсь сопоставить действие с реквизитом, однако я получаю сообщение об ошибке: TypeError: _this2.props.updateUsername не является функцией

Как можно успешно отобразить приставкудействия для поддержки и успешного вызова функции?Я не видел, чтобы эта ошибка появлялась в любом другом вопросе / ответе stackoverflow. Это простая ошибка?Может ли это быть неправильной настройкой редукса в .index или .app?

Я пытался: - импортировать без использования экспорта по умолчанию - иметь разные форматы 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}

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Не используйте mapDispatchToProps.Вместо этого просто оберните все действия, которые вы хотите отобразить внутри объекта, и передайте их в качестве второго аргумента методу помощника подключения.

Вот так connect(mapStateToProps, { updateUsername })(UserLoginPage)

Надеюсь, это поможет!

0 голосов
/ 25 февраля 2019

Можете ли вы проверить один раз после обновления вашего конструктора, как показано ниже? 

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