Ken428965 2023-03-10 14:03 采纳率: 53.4%
浏览 27
已结题

react,patch下架指定项,在刷新页面或重新进入页面后又再次出现,没有实现真正的下架效果?

问题情况如下:
在使用的react版本如下:

img

代码如下:

import React, { useEffect, useState } from 'react'

function Rent() {
  const [list, setList] = useState([])
  
  const getHouseList = () => {
    API.get('/user/houses').then(res=>{
      const { status, body } = res.data
      if (status === 200) {
        setList(body)
      }
    })
  }
  
  const deleteRent = (e, index, item) => {
    e.stopPropagation()
    let rent = [...list]
    rent.splice(index, 1)
    API.patch(`/user/houses/${item.houseCode}`,{shelf: false}).then(() => {
      setList(rent)
console.log(setList(rent))
    })
  }

  useEffect(() => {
    getHouseList()
  },[])
// ...
      return (
          <span className={styles.delete} onClick={(e)=>deleteRent(e, index, item)}><CloseCircleOutline /></span>
      )
// ...
}
export default Rent

以上代码的打印结果是undifined
目前效果如下,点击项目右下角删除图标,被点击项消失,浏览器没有报错,且浏览器network里显示更新成功,状态码是200:

img

然而,在刷新页面或重新进入页面后,被删除的项目又重新出现,即项目没有被真正下架

尝试过的努力:
1、把setList(rent)注释掉后,点击删除图标没有任何反应;
2、把getHouseList()加到setList(rent)下面,目的是希望在删除项目后重新获取最新的数据,然而效果是点击删除图标,项目消失了一秒钟后又自动出现了。

之前在另一处地方遇到过类似的情况,后来通过修改前端代码实现了想要的效果,如今遇到同样的情况,使用之前的方法不奏效,不知道是不是上面代码的问题,希望先从上面的代码找原因。请问代码有写得不对的地方吗?如何修改才能实现项目真正被下架?请在现有代码基础上展示举例说明,谢谢

  • 写回答

1条回答 默认 最新

  • 凉城┓.〆 2023-03-10 14:27
    关注

    1、建议使用filter

    const deleteRent = (e, index, item) => {
        e.stopPropagation()
        API.patch(`/user/houses/${item.houseCode}`,{shelf: false}).then(() => {
          setList(list.filter(i => i?.id !== item?.id))
        })
      }
    

    2、不用setlist(rent),在执行万patch后此重新请求数据

    API.patch(`/user/houses/${item.houseCode}`,{shelf: false}).then(() => {
      getHouseList()
    })
    
    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月10日
  • 创建了问题 3月10日

悬赏问题

  • ¥15 Windows Script Host 无法找到脚本文件"C:\ProgramData\Player800\Cotrl.vbs”
  • ¥15 matlab自定义损失函数
  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 求往届大挑得奖作品(ppt…)
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中,如何配置环境,可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图