在react-redux中定义函数很奇怪

时间:2017-03-10 01:01:29

标签: javascript reactjs redux

我正在研究react-redux。 有一些奇怪的情况,我花了整整一个小时。

这是许多教程中常见的方法。 但它在我的代码中不起作用。
详细而言,没有将事件传递给道具。

const VisibleFilterList = connect(mapStateToProps, mapDispatchToProps)(FilterList);

const mapDispatchToProps = (dispatch) => {
    return {
        updateFilter : (ev) => dispatch(setFilter(ev.target.value))
    }
};


经过大量挖掘这个问题,我只是将箭头功能改为普通功能。然后它工作!....?!?!

const VisibleFilterList = connect(mapStateToProps, mapDispatchToProps2)(FilterList);

function mapDispatchToProps2(dispatch) {
    return {
        updateFilter : (ev) => dispatch(setFilter(ev.target.value))
    }
}


甚至函数也具有相同的返回方法。我想知道为什么箭头功能不起作用。在许多教程中,使用箭头函数看起来更常见。帮助我。

2 个答案:

答案 0 :(得分:2)

因为variable声明不会解除,但function声明会解除。mapDispatchToProps下面的代码未定义,因为在{{1}之前未声明变量mapDispatchToProps } called.except connect()提升,function指令也提升声明。变量声明关键字很奇怪,如果你想知道,请参阅变量声明部分。

更改声明顺序

import

测试

const mapDispatchToProps = (dispatch) => {
   return {
    updateFilter : (ev) => dispatch(setFilter(ev.target.value))
   }
};
const VisibleFilterList = connect(mapStateToProps, mapDispatchToProps)(FilterList);

变量声明

describe('decalration lifting up', () => {

    test('constants not lifting up', () => {
        const foo = bar;
        const bar = () => {};

        var fuzz = buzz;
        const buzz = 'buzz';

        expect(foo).toBeUndefined();
        expect(fuzz).toBeUndefined();//not 'buzz'
    });

    test('variable not lifting up', () => {
        let foo = bar;
        let bar = () => {};

        expect(foo).toBeUndefined();
    });

    test('function lifting up', () => {
        let foo = bar;

        function bar() {};

        expect(foo).toEqual(expect.any(Function));
    });
});

答案 1 :(得分:0)

将箭头功能更改为

mapDispatchToProps = (dispatch) => {
    return {
        updateFilter : (ev) => dispatch(setFilter(ev.target.value))
    }
};

此答案基于您分享的可见代码,如果您显示更多代码,我可能需要更新此答案。

无论如何,习惯使用箭头功能,因为它是未来。