Question

我试图在单击时从数组中删除数字。基本上，我已经将一些数据映射到数组中的按钮中（数组在下面）。每次单击按钮时，功劳可用值都会输入到handleAdd函数中，而功劳可用值将出现在页面底部<div>Credit Available</div>下。

这是一小段代码示例，其余部分在下面。

附加到onClick，它首先检查val是否不在数组中，以避免重复，如果不在数组中，则将其添加到数组中。但是，如果再次单击它时它已经在数组中，则我希望将其删除。我该如何实现？

  function handleAdd(e, val, id) {
    if (!checkCredit.includes(val)) {
      setCheckCredit([...checkCredit, val]);
    } else if (checkCredit.includes(val)) {
    
    } else {
      console.log("nothing");
    }
  }

我的按钮组件在这里

import React from "react";
import PropTypes from "prop-types";
import "../css/Card.scss";

function Card({
  title,
  apr,
  balanceOfferDuration,
  purchaseOfferDuration,
  creditAvailable,
  creditValue,
  onClick,
  selected,
  id
}) {
  return (
    <button
      id={id}
      className={`card__item ${selected ? selected : false}`}
      onClick={onClick}
      readonly
    >
      <h2>{title}</h2>
      <p>
        <span> Apr: {apr}</span>
        <span> Balance Transfer Offer Duration: {balanceOfferDuration}</span>
        <span> Purchase Offer Duration: {purchaseOfferDuration}</span>
        <span> Credit Available: £{creditAvailable}</span>
      </p>
    </button>
  );
}

Card.propTypes = {
  id: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  apr: PropTypes.string.isRequired,
  balanceOfferDuration: PropTypes.string.isRequired,
  purchaseOfferDuration: PropTypes.string.isRequired,
  creditAvailable: PropTypes.number.isRequired,
  creditValue: PropTypes.string,
  onClick: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired
};

export default Card;

映射按钮并处理逻辑的组件：

import React, { useState } from "react";
import PropTypes from "prop-types";
import Card from "./Card";
import {
  studentPayload,
  liquidCardPayload,
  anywhereCardPayload
} from "../data/cardData";

const Cardlist = ({ incomeData, employmentData }) => {
  const [checkCredit, setCheckCredit] = useState([]);
  

  let payloads = [anywhereCardPayload];

  if (employmentData === "student") {
    payloads.push(studentPayload);
  } else if (incomeData >= 15000) {
    payloads.push(liquidCardPayload);
  }

  if (employmentData === "student" && incomeData > 15000) {
    payloads.push(liquidCardPayload);
  }

  function handleAdd(e, val, id) {
    if (!checkCredit.includes(val)) {
      setCheckCredit([...checkCredit, val]);
    } else if (checkCredit.includes(val)) {
    
    } else {
      console.log("nothing");
    }
  }

  console.log(checkCredit);

  return (
    <React.Fragment>
      {payloads.map(detail => (
        <div key={detail.title}>
          <Card
            id={detail.creditAvailable}
            title={detail.title}
            apr={detail.apr}
            onClick={e => handleAdd(e, detail.creditAvailable, detail.id)}
            balanceOfferDuration={detail.balanceOfferDuration}
            purchaseOfferDuration={detail.purchaseOfferDuration}
            creditAvailable={detail.creditAvailable}
          />
        </div>
      ))}
      <div>Credit Available: £{checkCredit} </div>
    </React.Fragment>
  );
};

Cardlist.propTypes = {
  incomeData: PropTypes.string.isRequired,
  employmentData: PropTypes.string.isRequired
};

export default Cardlist;

数组值

export const studentPayload = {
  id: 1,
  title: "Student Life",
  apr: "18.9",
  balanceOfferDuration: "0 months",
  purchaseOfferDuration: "6 months",
  creditAvailable: 1200,
  selected: false
};

export const liquidCardPayload = {
  id: 2,
  title: "Liquid Card",
  apr: "33.9%",
  balanceOfferDuration: "12 months",
  purchaseOfferDuration: "6 months",
  creditAvailable: 3000,
  selected: false
};

export const anywhereCardPayload = {
  id: 3,
  title: "Anywhere Card",
  apr: "33.9%",
  balanceOfferDuration: "0 months",
  purchaseOfferDuration: "0 months",
  creditAvailable: 300,
  selected: false
};

Answer 1

只需找到要查找的元素的索引，然后使用splice()函数将其删除。当然，由于我们在做出反应，因此最好的做法是不更改状态/数组，而是对其进行复制：

  function handleAdd(e, val, id) {
    if (!checkCredit.includes(val)) {
      setCheckCredit([...checkCredit, val]);
    } else if (checkCredit.includes(val)) {
       const i = checkCredit.indexOf(val);
       if(i > -1) {
         const newCheckCredit = [...checkCredit];
         newCheckCredit.splice(i);
         setCheckCredit(newCheckCredit);
       }
    } else {
      console.log("nothing");
    }
  }

编辑：代码中的小错字

从数组usestate中删除值

1 个答案: