在React中高效管理列表数据：实现单个卡片的精准删除

import React, { useState } from 'react';
import styled from 'styled-components'; // 假设使用了styled-components

// 示例数据
const carddata = [
    {
        name: "Best Of Paris In 7 Days Tour",
        image: "...",
        description: "...",
        price: "$1,995"
    },
    // ...更多数据
];

function Cards() {
    const [cardinfo, setCardinfo] = useState(carddata);

    // 原始的错误处理函数
    const handleClear = () => {
        setCardinfo([]); // 错误：这将清空整个数组
    };

    return (
        <Main>
            <div className='whole-cards'>
                {cardinfo.map((cardItem) => ( // 将carddata重命名为cardItem避免混淆
                    <div className='card-body' key={cardItem.name}> {/* 注意key的使用 */}
                        <img src={cardItem.image} alt={cardItem.name} />
                        <span>{cardItem.price}</span>
                        <h3>{cardItem.name}</h3>
                        <p>{cardItem.description}</p>
                        <button onClick={handleClear}>Not Interested</button> {/* 错误：所有按钮都调用同一个清空函数 */}
                    </div>
                ))}
            </div>
        </Main>
    );
}

// ... styled-components样式定义 (略)

// ... (其他导入和数据定义不变)

function Cards() {
    const [cardinfo, setCardinfo] = useState(carddata);

    // 正确的删除处理函数
    const handleClear = (cardToDelete) => {
        // 使用filter方法创建一个新数组，其中不包含cardToDelete
        const updatedCards = cardinfo.filter(item => item !== cardToDelete);
        setCardinfo(updatedCards); // 更新状态为新数组
    };

    return (
        <Main>
            <div className='whole-cards'>
                {cardinfo.map((cardItem) => (
                    <div className='card-body' key={cardItem.name}>
                        <img src={cardItem.image} alt={cardItem.name} />
                        <span>{cardItem.price}</span>
                        <h3>{cardItem.name}</h3>
                        <p>{cardItem.description}</p>
                        {/* 传递当前卡片对象给handleClear函数 */}
                        <button onClick={() => handleClear(cardItem)}>Not Interested</button>
                    </div>
                ))}
            </div>
        </Main>
    );
}

// ... styled-components样式定义 (略)

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

    // 新的handleClear函数，接受要删除的卡片对象作为参数
    const handleClear = (cardToDelete) => {
        // 使用filter方法创建一个新数组，其中不包含cardToDelete
        setCardinfo(cardinfo.filter(item => item !== cardToDelete));
    };

    return (
        <Main>
            <div className='whole-cards'>
                {cardinfo.map((cardItem) => (
                    <div className='card-body' key={cardItem.name}> {/* 确保key是唯一的 */}
                        <img src={cardItem.image} alt={cardItem.name} />
                        <span>{cardItem.price}</span>
                        <h3>{cardItem.name}</h3>
                        <p>{cardItem.description}</p>
                        {/* 当按钮被点击时，调用handleClear并传入当前cardItem */}
                        <button onClick={() => handleClear(cardItem)}>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;