React Hooks中从数组映射生成的卡片中删除单个元素的正确姿势

const handleClear = () => {
    setCardinfo([]);
}

// Cards.js
import React, {useState} from 'react'
import styled from 'styled-components'

function Cards() {
    // ... (carddata 保持不变)
    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-Chapel...",
        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...",
        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...",
        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...",
        price:"$2,595"
    }]

    const [cardinfo, setCardinfo] = useState(carddata)

    // 修改后的 handleClear 函数
    const handleClear = (itemToDelete) => {
        // 使用 filter 方法创建一个新数组，不包含 itemToDelete
        setCardinfo(cardinfo.filter(card => card !== itemToDelete));
    }

    return (
        <Main>
            <div className='whole-cards'>
                {cardinfo.map((carddata) => (
                    <div className='card-body' key={carddata.name}>
                        <img src={carddata.image} alt={carddata.name} />
                        <span>{carddata.price}</span>
                        <h3>{carddata.name}</h3>
                        <p>{carddata.description}</p>
                        {/* 步骤二：更新按钮的 onClick 事件 */}
                        <button onClick={() => handleClear(carddata)}>Not Interested</button>
                    </div>
                ))}
            </div>
        </Main>
    )
}

// ... (styled components 保持不变)
const Main = styled.div`
    width:100%;
    /* ... 样式代码 ... */
`;

export default Cards;

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