我正在研究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))
}
}
甚至函数也具有相同的返回方法。我想知道为什么箭头功能不起作用。在许多教程中,使用箭头函数看起来更常见。帮助我。
答案 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))
}
};
此答案基于您分享的可见代码,如果您显示更多代码,我可能需要更新此答案。
无论如何,习惯使用箭头功能,因为它是未来。