Lodash groupBy fat arrow function with React

问题

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?

回答1:

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>

来源：https://stackoverflow.com/questions/47323874/lodash-groupby-fat-arrow-function-with-react

标签

javascript

reactjs

lodash