过滤器在单击按钮时不会删除数组中的每个项目.请协助

Question

单击按钮时，筛选器不会删除数组中的每个项。onclick事件的id被正确接收。第一个元素也被删除了，那么它不会删除另一个元素。

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)=>{//filtering functoin           
const newTour=tourPack.filter((tour)=>tour.id!==id)
console.log(newTour);
setTourPackage(newTour)          
}
return (
<div>
<h1>{TourPackage.map((t)=>
<h1 key={t.id} >{t.name}<button onClick={()=>{removeTour(t.id)}}>Not interested!</button></h1>
)}</h1>                   
</div>
)
}

Answer 1

您可能会遇到这个问题，因为当您只需要一个变量时，您有两个独立的变量指向数组。tourPack将被设置为每个渲染周期的默认值。tourPackage也是如此，因为它是基于它的。

import React,{useState} from 'react'
export default function Tour() {

const [TourPackage, setTourPackage] = useState([
{
id:1,
name:'a'           
},
{
id:2,
name:'k'
},
{
id:3,
name:'b'
}
]);
const removeTour=(id)=>{//filtering functoin           
const newTour=TourPackage.filter((tour)=>tour.id!==id)
console.log(newTour);
setTourPackage(newTour)          
}
return (
<div>
<h1>{TourPackage.map((t)=>
<h1 key={t.id} >{t.name}<button onClick={()=>{removeTour(t.id)}}>Not interested!</button></h1>
)}</h1>                   
</div>
)
}

只能使用TourPackage