Ken428965 2022-12-23 02:03 采纳率: 53.4%
浏览 110
已结题

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

在使用的react版本如下:

img


已写的代码:

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

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

img

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

img

img

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

img

当把代码修改成如下:

img

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

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

img

img

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

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

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

展开全部

  • 写回答

1条回答 默认 最新

  • 诗人远行 2022-12-23 02:40
    关注

    img

    img


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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月23日
  • 已采纳回答 12月23日
  • 创建了问题 12月23日

悬赏问题

  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
  • ¥20 Excel数据自动录入表单并提交
  • ¥30 silcavo仿真,30分钟,只需要代码
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部