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")
    let list = [...favorite]
    list.splice(index, 1)
    API.delete(`/user/favorites/${index}`).then(res => {
      setFavorite(list)
      getFavorite()
    })
  }

  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>
    </>
  )
}

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

目前效果如下，点击每一项右下角的删除图标后，被点击项立刻消失了：

然而，被点击项在消失后一秒左右又自动出现了，并且刷新页面或重返此页面后，被点击项又再次出现，没有实现想要的删除效果：

请问代码有哪些地方写得不对？如何修改才能实现想要的效果？请展示代码举例说明。

Answer 1

ChatGPT提供解答思路
看起来您在组件内部有两个函数来更新状态变量 favorite。

第一个函数是 deleteFavorite，它在点击删除图标时被调用。它从 favorite 中删除了一项，并使用 API 调用删除了服务器上的项目。

第二个函数是 getFavorite，它使用 API 调用获取服务器上的收藏夹列表，然后将它设置为 favorite 状态变量。

这两个函数看起来有点重复，因为它们都更新了 favorite 状态变量。这可能是您的问题的原因之一。

具体来说，我猜测当您点击删除图标时，先删除服务器上的项目，然后使用 deleteFavorite 函数从 favorite 中删除项目，然后再调用 getFavorite 函数从服务器获取最新的收藏夹列表并将其设置为 favorite。这导致了在删除项目之后，项目一秒钟后又自动出现的情况。

可以在删除项目之后直接使用 setFavorite 函数将更新后的收藏夹列表设置为 favorite，而不是再次调用 getFavorite 函数。

例如，您可以改写 deleteFavorite 函数如下：

const deleteFavorite = (e) => {
  e.stopPropagation()
  let index = e.target.getAttribute("data-index")
  let list = [...favorite]
  list.splice(index, 1)
  API.delete(`/user/favorites/${index}`).then(res => {
    setFavorite(list)
  })
}

这样，在删除项目之后，就可以直接使用 setFavorite 函数将更新后的收藏夹列表设置为 favorite，而不是再次调用 getFavorite 函数。这可以避免删除项目之后一秒钟后又自动出现的情况。
希望这对您有帮助
您也可以考虑在 useEffect 中使用 getFavorite 函数来更新收藏夹，而不是在删除项后调用。这样，您就可以在删除项后不再调用 getFavorite，从而避免出现被删除的项。

例如：

useEffect(() => {
  // 在组件挂载后调用 getFavorite
  getFavorite()

  // 在组件更新后也调用 getFavorite
  // 这样就可以在删除项后更新收藏夹了
  return () => getFavorite()
}, [])

如果你只想让被删除项消失后不再出现，可以将上面的代码修改为：

const deleteAndGetFavorite = (index) => {
  let list = [...favorite]
  list.splice(index, 1)
  setFavorite(list)
  API.delete(`/user/favorites/${index}`).then(res => {
    setFavorite(res.data.body)
  })
}

const deleteFavorite = (e) => {
  e.stopPropagation()
  let index = e.target.getAttribute("data-index")
  deleteAndGetFavorite(index)
}