Lodash组通过React的胖箭头功能 [英] Lodash groupBy fat arrow function with React
本文介绍了Lodash组通过React的胖箭头功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
接着是 Lodash groupBy with moment (按时刻)，该日期按照日期(例如今天，本周，月份等)对数组进行分组一个胖箭头功能和一个瞬间，我现在尝试启用if else else(或三进制)，仅当sort参数(从state传入)实际上是一个日期时才启用此功能.
这就是我目前所拥有的...
let groupby = datum => {
if (this.state.sortGroup ='updatedAt') {
return determineGroup(moment(groupProp(datum)));
} else {
this.state.sortGroup
}
}
//console log point 1 - shows state change
groupedData = _
.chain(this.props.records)
.groupBy(groupby)
.map(function(val, key) {
return {
group: key,
records: val
};
})
.value()
//console log point 2 - no state change
它完全按分组的createdAt进行排序，但是当我放入if then else功能时，它不会按任何其他道具进行排序.同样有趣的是，在日志点2上，它没有显示状态变化.
这是我做错的事情吗，它影响if if else函数中的状态或不良代码?
解决方案
我假设sortGroup指的是数据上属性的名称，在这种情况下，我认为您需要更多类似的东西:
const data = [{
campaign: "Charles",
company_ID: "1",
coreURL: "http://www.test77.com",
createdAt: "2017-11-06T20:45:56.931Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-09-06T20:45:56.931Z",
_id: "6gsb42PSSJt7PgsDG"
}, {
campaign: "Charles",
company_ID: "1",
coreURL: "http://www.test66,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-10-06T20:46:27.744Z",
_id: "Md4wCnEsrQrWApnLS"
}, {
campaign: "Gary",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-07-06T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-15T03:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-03T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-13T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-09T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}];
const groupProp = _.property('updatedAt');
let determineGroup = value => {
// remove '2017-11-15' to actually use current date
const now = moment('2017-11-15T10:00:03Z').startOf('day');
if (value.isSame(now, 'day')) {
return 'today';
}
if (value.isAfter(now.clone().subtract(7, 'days').startOf('day'))) {
return 'this week';
}
if (value.isSame(now, 'month')) {
return 'this month';
}
return value.format('MM');
};
this.state = {
sortGroup: 'updatedAt'
};
let groupby = datum => {
const groupValue = datum[this.state.sortGroup];
if (this.state.sortGroup === 'updatedAt') {
return determineGroup(moment(groupValue));
} else {
return groupValue;
}
}
let groupedData = _
.chain(data)
.groupBy(groupby)
.value()
console.log(groupedData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
Following on from Lodash groupBy with moment that groups an array by dates such as today, this week, month etc by using a fat arrow function and moment I am now trying to enable if then else (or ternary) that only enables this if the sort parameter (passed in from state) is actually a date.
This is what I have at the moment...
let groupby = datum => {
if (this.state.sortGroup ='updatedAt') {
return determineGroup(moment(groupProp(datum)));
} else {
this.state.sortGroup
}
}
//console log point 1 - shows state change
groupedData = _
.chain(this.props.records)
.groupBy(groupby)
.map(function(val, key) {
return {
group: key,
records: val
};
})
.value()
//console log point 2 - no state change
It sorts by the grouped createdAt perfectly, but when I put the if then else functionality in it does not sort by any other prop. Also interestingly at log point 2 it does not show the state changing.
Is this something I am doing wrong that is affecting state or poor code in the if then else function?
解决方案
I'm assuming sortGroup refers to the name of a property on the data, in which case, I think you need something more like this:
const data = [{
campaign: "Charles",
company_ID: "1",
coreURL: "http://www.test77.com",
createdAt: "2017-11-06T20:45:56.931Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-09-06T20:45:56.931Z",
_id: "6gsb42PSSJt7PgsDG"
}, {
campaign: "Charles",
company_ID: "1",
coreURL: "http://www.test66,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-10-06T20:46:27.744Z",
_id: "Md4wCnEsrQrWApnLS"
}, {
campaign: "Gary",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-07-06T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-15T03:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-03T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-13T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}, {
campaign: "Fred",
company_ID: "1",
coreURL: "http://www.test55,com",
createdAt: "2017-11-06T20:46:27.744Z",
owner: "K7xTxu7PRDCuhFZRC",
updatedAt: "2017-11-09T20:46:27.744Z",
_id: "5p44uiwRgqp35YXRf"
}];
const groupProp = _.property('updatedAt');
let determineGroup = value => {
// remove '2017-11-15' to actually use current date
const now = moment('2017-11-15T10:00:03Z').startOf('day');
if (value.isSame(now, 'day')) {
return 'today';
}
if (value.isAfter(now.clone().subtract(7, 'days').startOf('day'))) {
return 'this week';
}
if (value.isSame(now, 'month')) {
return 'this month';
}
return value.format('MM');
};
this.state = {
sortGroup: 'updatedAt'
};
let groupby = datum => {
const groupValue = datum[this.state.sortGroup];
if (this.state.sortGroup === 'updatedAt') {
return determineGroup(moment(groupValue));
} else {
return groupValue;
}
}
let groupedData = _
.chain(data)
.groupBy(groupby)
.value()
console.log(groupedData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
这篇关于Lodash组通过React的胖箭头功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
