Question

我正在研究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))
    }
}

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

Answer 1

因为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));
    });
});

Answer 2

将箭头功能更改为

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

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

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

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

2 个答案:

更改声明顺序

测试

变量声明