react，点击删除图标删除指定项，被删除项连同其他项一起被删除？

Question

在使用的react版本如下：

已写的代码：

const Favorite = () => {
  const navigate = useNavigate()
  const [favorite, setFavorite] = useState([])

  const getFavorite = () => {
    API.get(`/user/favorites`).then(res => {
        setFavorite(res.data.body)
    })
  }

  const deleteFavorite = (e) => {
    e.stopPropagation()
    let index = e.target.getAttribute("data-index")
    console.log('位置1', index)
    let list = [...favorite]
    console.log('位置2', list)
    list.splice(index, 1)
    // favorite.map(item => {
      // API.delete(`/user/favorites/${item.houseCode}`).then(res => {
        API.delete(`/user/favorites/${index}`).then(res => {
      setFavorite(list)
    // })
  })
  }

  useEffect(() => {
    getFavorite()
  },[])

  return (<>
      <div className={styles.root}>
      <List>
        {favorite.map((item, index) => {
          // console.log(item)
          return (
          <List.Item 
            key={item.desc} 
            prefix={<Image src={BASE_URL + item.houseImg} style={{ borderRadius: 0 }} fit='cover' width={80} height={80}/>} 
            title={item.title}
            description={item.price + '元/月'} 
            arrow={false}>
              <div className={styles.desc}>{item.desc}</div>
              <span className={styles.delete} data-index={index} onClick={deleteFavorite}><CloseCircleOutline /></span>
          </List.Item>)
})}
      </List>
    </div>
    </>
  )
}

希望实现如下效果，点击任意一项右下角的删除图标后，被点击项立刻消失，即使刷新页面或重返此页面后，被点击项也不会再出现

目前效果如下，无论点击哪一项右下角的删除图标，都会让位于顶部的那一项消失：

刷新页面或重返此页面后，所有被删除的项又再次出现，没有实现想要的删除效果：

当把代码修改成如下：

  const deleteFavorite = (e) => {
    e.stopPropagation()
    let index = e.target.getAttribute("data-index")
    console.log('位置1', index)
    let list = [...favorite]
    console.log('位置2', list)
    list.splice(index, 1)
    favorite.map(item => {
      console.log('位置3', item)
      API.delete(`/user/favorites/${item.houseCode}`).then(res => {
        // API.delete(`/user/favorites/${index}`).then(res => {
      setFavorite(list)
    })
  })
}

无论点击哪一项，均全部一起消失（证明删除成功），然而，即使刷新或重新进入页面，页面内已没有任何内容，把不想删除的项都给删除了：

位置1的index打印结果为null，或许说明被点击项的获取不成功；
位置3的item打印结果为全部项，或许说明无论点击哪一项，都会将全部项删除。

由于我不是互联网的，只是对写代码抱有热诚，目前还处于学习阶段，因此不知道如何修改才能实现点击哪个删除哪个的效果，恳请指教

请问如何修改才能实现点击哪个删除哪个的效果？请在现有代码基础上展示举例说明，谢谢。

Answer 1

这上面两步可以解决删除指定项的问题，注意只是暂时的删除

关于首次进来或者刷新时的数据问题，要明确，首次进来时会先调用useEffect里的getFavorite，通过这个接口获取数据，我不知道这个项目里用的接口是不是真实的，明显就是删除接口没有真实删除数据，所以getFavorite每次都拿到原来的值，