Question

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

此以下功能用于测试信用卡是否过期。如果卡已过期并且true是卡有效，则此函数返回布尔值false

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的{{1}}和expiryYear

一旦找到PaymentMethods，它将检查卡是否已过期；如果卡已过期，它将从cardType: CREDIT数组中删除该付款方式，并将其分配给另一个数组。

例如，如果有2张过期的信用卡，则应将其从paymentMethods数组中删除，然后将其推入另一个列出这2张过期的信用卡的数组。

有人能说明这个困难吗？

Answer 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));

Answer 2

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

import React, { Component } from 'react'
import "./Display.css";

export default class Display extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      data: []
    };
  }

  componentWillReceiveProps() {
    fetch("http://localhost:5000/company?company_name=" + this.props.listDataFromParent)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            data: result
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
  render() {
    const { error, isLoaded, data } = this.state;
    // if (error) {
    //   return <div>Error: {error.message}</div>;
    // } else if (!isLoaded) {
    //   return <div>Loading...</div>;
    // } else {
    return (
      <div className="display">
        <h1>Kreditnehmer</h1>
        <ul>
          {this.props.listDataFromParent}

          {data.map(item => (
            <li key={item.c.company_id}>
              Relation type: {item.r.relation_group}
              Last name: {item.p.last_name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Answer 3

使用ES6，即简化运算符，并减少：

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]

从阵列React过滤过期的卡

3 个答案: