React中点击按钮调用filter仅删除数组首个元素无法删除其余元素求助

你的删除逻辑里每次过滤使用的是初始化用的常量tourPack，这个值是固定写死在组件内的，永远保留初始的3条数据。第一次删除后你虽然更新了state变量TourPackage，但后续删除操作还是基于原始的tourPack做过滤，自然无法实现逐个删除的效果。

修改removeTour函数，过滤时使用当前最新的state值即可，更推荐使用setState的函数式更新写法，避免state异步更新导致的取值异常：

import React,{useState} from 'react'
export default function Tour() {
    const tourPack=[
        {
            id:1,
            name:'a'           
        },
        {
            id:2,
            name:'k'
        },
        {
            id:3,
            name:'b'
        }
    ]
    const [TourPackage, setTourPackage] = useState(tourPack)
    const removeTour=(id)=>{
        // 函数式更新的入参prev永远是最新的state值
        setTourPackage(prev => prev.filter((tour)=> tour.id !== id))
    }
    return (
        <div>
            {/* 额外优化：不要嵌套h1标签，不符合HTML语义规范，外层改成div */}
            <div>
                {TourPackage.map((t)=>
                    <h1 key={t.id} >{t.name}<button onClick={()=>{removeTour(t.id)}}>Not interested!</button></h1>
                )}
            </div>                   
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Ghulam Asghar Dahri