【问题标题】:Lodash groupBy fat arrow function with ReactLodash groupBy 带有 React 的胖箭头函数
【发布时间】:2017-11-16 07:26:34
【问题描述】:

Lodash groupBy with moment 开始,通过使用胖箭头函数和时刻等日期对数组进行分组,例如今天、本周、月份等,我现在尝试启用 if then else(或三元),仅在 if排序参数(从 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 then else 函数中的状态或糟糕的代码吗?

【问题讨论】:

  • 您在第一个 if (assignment) 中使用了单等号,这可能是您的问题之一。在 else 语句中,您也不会返回 this.state.sortGroup。
  • 感谢您的快速回复 :-) 我试过 == 和 === 并且它根本没有排序。我应该如何返回 this.state.sortGroup?

标签: javascript reactjs lodash


【解决方案1】:

我假设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>

【讨论】:

  • 谢谢@JLRishe。是的 this.state.sortGroup 存储控制排序的下拉选择的结果。可以通过 createdAt、campaign 等存储在其中。您的代码确实恢复了其他道具的分组,但它打破了今天、本周等的排序
  • @NickWild 似乎在上面工作。您是否尝试对createdAt 以外的属性使用基于日期的分组?
  • 嗨,不,我不是,是的,我同意如果您手动将 createdAt 或活动等输入 state.sortGroup 一切正常,所以这段代码可以工作(谢谢),但是这个“if then else”代码似乎确实打破了状态并禁用下拉设置状态。你还需要看代码吗?
  • @NickWild 也许state.sortGroup 实际上不是一个字符串值。您可以尝试将其记录到控制台吗?
  • 它似乎是来自控制台日志位置 1:updatedAt 和控制台日志位置 2:updatedAt 的字符串。但是设置此状态的下拉菜单现在不设置状态。删除这个函数,它会再次设置状态 OK
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-01-12
  • 1970-01-01
  • 2018-02-01
  • 1970-01-01
  • 2023-03-12
  • 2021-06-23
  • 1970-01-01
相关资源
最近更新 更多