Реагируйте на Redux: «X не является функцией» после использования mapDispatchToProps - PullRequest
Новая
       9

Реагируйте на Redux: «X не является функцией» после использования mapDispatchToProps

3 голосов
/ 13 мая 2019

Очень плохо знаком с Redux.Я следую примеру на своем рабочем месте, чтобы попытаться создать кнопку входа в Facebook, используя компонент без сохранения состояния.Кажется, я не могу связать свойство clickHandler с функцией любого описания.В приведенном ниже примере я сократил его до простого консольного журнала.Что бы я ни делал, когда я нажимаю кнопку, я получаю «clickHandler - это не функция».Что я делаю не так?

Компонент 

import React from 'react';

const FacebookLoginComponent = (props) => {
    const {
        clickHandler
    } = props;
    return(
        <button className="btn btn-primary" onClick={ () => clickHandler() }>Say hello</button>
    )
}
export default FacebookLoginComponent;

Контейнер 

import { connect } from 'react-redux';
import FacebookLoginComponent from "../components/FacebookLogin";

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
    clickHandler: () => console.log('hello')
})

const FacebookLogin = connect(
    mapStateToProps,
    mapDispatchToProps,
)(FacebookLoginComponent);

export default FacebookLogin;

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Я подозреваю, что вы могли использовать неподключенный FacebookLoginComponent по ошибке вместо подключенного FacebookLogin.

Если бы вы использовали FacebookLoginComponent и не передавали никакие реквизиты, то clickHandler действительно не был бы функцией.

0 голосов
/ 13 мая 2019

Вы помещаете обработчик кликов в функцию mapDispatchToProps, которая используется для отправки действий в хранилище. Обычно вы не определяете обработчики событий в функциях mapStateToProps или mapDispatchToProps. Он должен работать, если вы поместите его в функцию mapStateToProps, но я бы лучше определил его в вашем компоненте так: 

import React from 'react';

const FacebookLoginComponent = (props) => {
    const clickHandler = () => console.log("Hello World");

    return(
        <button className="btn btn-primary" onClick={clickHandler}>Say hello</button>
    )
}
export default FacebookLoginComponent;

И вытащите его из контейнера.

Вы также можете обернуть ваши действия с помощью dispatch () в вашем обработчике mapDispatchToProps, как показано здесь: https://react -redux.js.org / using-реагировать-редукция / connect-mapdispatch

...