React中数组映射生成卡片，如何实现单个删除而非清空全部？

你遇到的问题是因为当前的handleClear函数直接将整个cardinfo状态重置为空数组，所以无论点击哪个按钮，都会清空所有卡片。要实现只删除点击对应的卡片，需要修改逻辑，让函数明确知道要删除哪一项：

修改步骤： #

1. 更新删除函数：让handleClear接收要删除的卡片名称作为参数，通过过滤数组保留不需要删除的项：

const handleClear = (cardName) => {
  setCardinfo(prevCards => prevCards.filter(card => card.name !== cardName));
}

这里使用函数式更新（prevCards）是为了确保基于最新的状态进行修改，避免状态更新的异步问题。

2. 修改按钮的点击事件：给每个按钮传递当前卡片的name，让函数定位到要删除的目标卡片：

<button onClick={() => handleClear(carddata.name)}>Not Interested</button>

修改后的完整代码： #

import React, {useState} from 'react'
import styled from 'styled-components'

function Cards() {

    const carddata = [{
        name: "Best Of Paris In 7 Days Tour",
        image: "https://res.cloudinary.com/dgpmofizn/image/upload/v1684017660/img-1_xli1dp.jpg",
        description: "Paris is synonymous with the finest things that culture can offer — in art, fashion, food, literature, and ideas. On this tour, your Paris-savvy Rick Steves guide will immerse you in the very best of the City of Light: the masterpiece-packed Louvre and Orsay museums, resilient Notre-Dame Cathedral, exquisite Sainte-Chapelle, and extravagant Palace of Versailles. You'll also enjoy guided neighborhood walks through the city's historic heart as well as quieter moments to slow down and savor the city's intimate cafés, colorful markets, and joie de vivre. Join us for the Best of Paris in 7 Days!",
        price:"$1,995"
    },{
        name: 'Best Of Ireland In 14 Days Tour',
        image: "https://res.cloudinary.com/dgpmofizn/image/upload/v1684017660/img-3_tyhpum.jpg",
        description: "Rick Steves' Best of Ireland tour kicks off with the best of Dublin, followed by Ireland's must-see historical sites, charming towns, music-filled pubs, and seaside getaways — including Kinsale, the Dingle Peninsula, the Cliffs of Moher, the Aran Islands, Galway, Connemara, Giant's Causeway, and the compelling city of Belfast. All along the way, Rick's guides will share their stories to draw you in to the Emerald Isle, and the friendliness of the people will surely steal your heart. Join us for the Best of Ireland in 14 Days!",
        price:"$3,895"
    },{
        name: 'Best Of Salzburg & Vienna In 8 Days Tour',
        image: "https://res.cloudinary.com/dgpmofizn/image/upload/v1684017660/img-4_twyhns.jpg",
        description: "Let's go where classical music, towering castles, and the-hills-are-alive scenery welcome you to the gemütlichkeit of Bavaria and opulence of Austria's Golden Age. Your Rick Steves guide will bring this region's rich history and culture to life in festive Munich, Baroque Salzburg, sparkling Lake Hallstatt, monastic Melk, the blue Danube, and royal Vienna — with cozy villages and alpine vistas all along the way. Join us for the Best of Munich, Salzburg & Vienna in 8 Days",
        price:"$2,695"
    }, {
        name: 'Best Of Poland In 10 Days Tour',
        image: "https://res.cloudinary.com/dgpmofizn/image/upload/v1684017660/img-2_ss0wiu.jpg",
        description: "Starting in the colorful port city of Gdańsk, you'll escape the crowds and embrace the understated elegance of ready-for-prime-time Poland for 10 days. With an expert Rick Steves guide at your side, you'll experience mighty Malbork castle, the cobbly-cute village of Toruń, Poland's contemporary capital of Warsaw, the spiritual Jasna Góra Monastery, and charming Kraków — Poland's finest city. In this land of surprises — so trendy and hip, yet steeped in history — there's so much to discover. Join us for the Best of Poland in 10 Days!",
        price:"$2,595"
    }]

    const [cardinfo, setCardinfo] = useState(carddata)

    const handleClear = (cardName) => {
        setCardinfo(prevCards => prevCards.filter(card => card.name !== cardName));
    }

  return (
    <Main>
        <div className='whole-cards'>
            {cardinfo.map((carddata) => (
                <div className='card-body' key={carddata.name}>
                    <img src={carddata.image} />
                    <span>{carddata.price}</span>
                    <h3>{carddata.name}</h3>
                    <p>{carddata.description}</p>
                    <button onClick={() => handleClear(carddata.name)}>Not Interested</button>
                </div>
            ))}
        </div>
    </Main>
  )
}

const Main = styled.div`
    width:100%;
    

   .whole-cards{
    display:flex;
    flex-wrap:wrap;
    padding:5px;
    margin:10px;
    
    .card-body{
        border:1px solid black;
        height:700px;
        margin:10px;
        width:350px;
        background-color:white;

        img{
            height:300px;
            width:350px;
            z-index:0;
        }

        span{
            z-index:1;
            border:1px solid green;
            background-color:green;
            color:white;
            position:relative;
            padding:5px;
            top:-298px;
            left:294px;
        }

        h3{
            text-align:center;
        }

        button{
            width:250px;
            color:green;
            position:relative;
            left:40px;
            background-color:white;
            border:1px solid green;
        }
    }
   }
`;

export default Cards

额外说明： #

• 使用filter方法创建新数组，符合React状态不可变的原则（不能直接修改原状态数组）。
• 因为你的卡片数据中name是唯一的，所以用它作为删除的标识；如果未来数据有重复name的可能，建议给每个对象添加唯一的id字段，用id来过滤更可靠。

内容的提问来源于stack exchange，提问作者NS1