从 React 数组中过滤过期的卡片答案

【问题标题】：Filter expired cards from array React从 React 数组中过滤过期的卡片
【发布时间】：2020-03-23 08:36:09
【问题描述】：

我有以下扭曲的情况，需要一些指导。这是代码

下面这个函数是用来检测信用卡是否过期的。如果卡已过期且false 卡有效，则此函数返回布尔值true

const isCardExpired = (mm, yy) => {
  const month = parseInt(mm, 10);
  const year = parseInt(yy, 10);
  const date = new Date();
  const currentYear = parseInt(
    date
      .getFullYear()
      .toString()
      .substr(-2),
    10
  );
  const currentMonth = date.getMonth() + 1;
  console.log(month, year, date, currentYear, currentMonth);
  if (year < currentYear) {
    return true;
  }

  if (month > 12 || (year === currentYear && month < currentMonth)) {
    return true;
  }
  return false;
};

这是我的PaymentMethods 长度为3 的数组。它可能会有所不同，这就是为什么我必须循环播放它。

(3) [PaymentMethod, PaymentMethod, PaymentMethod]
0: PaymentMethod
data:
    cardLast4Digits: "1111"
    cardType: "CREDIT"
    expiryMonth: "2"
    expiryYear: "19"

1: PaymentMethod
data:
    cardLast4Digits: "6144"
    cardType: "DEBIT"
    expiryMonth: "12"
    expiryYear: "24
2: PaymentMethod
data:
    cardLast4Digits: "6949"
    cardType: "VISA"
    expiryMonth: "12"
    expiryYear: "25"
length: 3

这是我需要做的，我需要遍历所有 3 种付款方式，只拿起cardType: "CREDIT 并使用上述isCardExpired 功能检查卡是否过期。 yy 和 mm 到这个函数基本上是 expiryMonth 和 expiryYear from PaymentMethods

一旦找到cardType: CREDIT，它将检查卡是否过期，如果过期，它将从paymentMethods数组中删除该支付方式并将其分配给不同的数组。

例如，如果有 2 张过期的信用卡，则应将其从 PaymentMethods 数组中删除，并将其推送到另一个数组，该数组将列出这 2 张过期的信用卡。

有人可以解释一下这个困难吗？

【问题讨论】：

您需要从 paymentMethods 数组中过滤无效付款并将它们推送到新数组中。只要您将该对象传递给 React 或通过 React 状态处理它，它就会在内部识别状态变化并重新渲染。在数组过滤器上：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript arrays reactjs loops object

【解决方案1】：

试试这个：

const expiredCards = paymentMethods.filter(c => c.data.cardType === "CREDIT" && isCardExpired(c.data.expiryMonth, c.data.expiryYear));
paymentMethods= paymentMethods.filter(c => c.data.cardType !== "CREDIT" || !isCardExpired(c.data.expiryMonth, c.data.expiryYear));

【讨论】：

这让我更加困惑。我只想遍历常规数组并从中取出过期的数组。不需要使用道具或任何东西
没有allCards 将保持不变。它将保留所有卡，有效卡和过期卡。在过滤器之后尝试console.log(allCards)。
再次更新了我的帖子 :)
const expiredCards = paymentMethods.filter(c => c.data.cardType === "CREDIT" && isCardExpired(c.data.expiryMonth, c.data.expiryYear));你能用这个工作更新你的答案吗？我接受了你的回答
你是对的。我错过了data 部分。我编辑了它。

【解决方案2】：

使用 ES6、spad 运算符和 reduce：

function partitionExpiredCards(cardArray) {
 return cardArray.reduce(
  ([pass, fail], elem) => {
   return isCardExpired(elem) ? [[...pass, elem], fail] : [pass, [...fail, elem]];
  },
  [[], []]
 );
}

const [ExpiredPaymentMethods, ValidPaymentMethods] = partition(PaymentMethods);

也可以这样写：

const [ExpiredPaymentMethods, ValidPaymentMethods] = PaymentMethods.reduce(([p, f], v) => (isCardExpired(v) ? [[...p, v], f] : [p, [...v, e]]), [[], []]);

对于任一示例，如果不应更改 PaymentMethods，请将 PaymentMethods 替换为：

[...PaymentMethods]

【讨论】：

【解决方案3】：

我不知道我是否正确理解了您想要实现的目标，但这是我的示例

const getExpiredCards = (paymentMethods)=>paymentMethods.filter(({expiryMonth,expiryYear,cardType})=>cardType === 'CREDIT' && isCardExpired(expiryMonth,expiryYear))

【讨论】：

我需要将过期的信用卡放在一个数组中，并希望原始数组中的所有有效信用卡paymentMethods
类似的东西，或者你想像我以前的答案一样将它存储在一个对象中？
有没有办法从原始数组中删除过期的PaymentMethods
如果您想在此之后将其用作任何组件的道具，这是不可能的。您应该创建一个新的“容器”来存储值。