Ken428965 2022-12-07 15:16 采纳率: 53.4%
浏览 35
已结题

react,如何实现删除指定项?

在使用的react版本如下:

img


已写的代码:

import { AddCircleOutline, CloseCircleOutline } from 'antd-mobile-icons'
function Rent() {
    const [list, setList] = useState([])
    API.get('/user/houses').then(res=>{
    const { status, body } = res.data
    setList(body)})
    const deleteRent = (e) => {
      let index = e.target.getAttribute("data-index")
      list.splice(index, 1, "")
      setList(list)
    }
    const renderHouseItem = () => {
      return list.map(item => {
        return (
          <div className={styles.A} key={item.houseCode}>
            <div>
              <HouseItem
                // key={item.houseCode}
                onClick={() => navigate(`/detail/${item.houseCode}`)}
                src={BASE_URL + item.houseImg}
                title={item.title}
                desc={item.desc}
                tags={item.tags}
                price={item.price}
                style={{'height': '105px'}}
              />
            </div>
            <span className={styles.delete} key={item.index} data-index={item.index} onClick={(e)=>{e.stopPropagation();deleteRent()}}><CloseCircleOutline /></span>
          </div>
        )
      })
    }
  const renderRentList = () => {
    return <div className={styles.houses}>{renderHouseItem()}</div>
  }
  return (<>
      <div className={styles.root}>
        {renderRentList()}
      </div>
      </>
  )
}

目前效果如下,删除按钮可成功显示出来,然而,点击删除图标后,浏览器显示target未定义:

img

img

请问以上代码写得有哪些不对的地方吗?请展示代码举例说明,谢谢。

展开全部

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-12-08 01:38
    关注
    
    import { AddCircleOutline, CloseCircleOutline } from 'antd-mobile-icons'
    function Rent() {
        const [list, setList] = useState([])
        API.get('/user/houses').then(res=>{
        const { status, body } = res.data
        setList(body)})
        const deleteRent = (index) => {
          list.splice(index, 1, "")
          setList(list)
        }
        const renderHouseItem = () => {
          return list.map(item => {
            return (
              <div className={styles.A} key={item.houseCode}>
                <div>
                  <HouseItem
                    // key={item.houseCode}
                    onClick={() => navigate(`/detail/${item.houseCode}`)}
                    src={BASE_URL + item.houseImg}
                    title={item.title}
                    desc={item.desc}
                    tags={item.tags}
                    price={item.price}
                    style={{'height': '105px'}}
                  />
                </div>
                <span className={styles.delete} key={item.index} data-index={item.index} onClick={(e)=>{e.stopPropagation();deleteRent(item.index)}}><CloseCircleOutline /></span>
              </div>
            )
          })
        }
      const renderRentList = () => {
        return <div className={styles.houses}>{renderHouseItem()}</div>
      }
      return (<>
          <div className={styles.root}>
            {renderRentList()}
          </div>
          </>
      )
    }
    
    
    
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    Ken428965 2022-12-08 03:15

    感谢分享~
    修改后,浏览器显示:

    img


    先解决第一项报错,把此处注释掉后,第一项报错不再出现:

    img


    接着处理第二项报错,提示说每一个子项都有key值,可能是此处没有key值,于是把此处的key值加上后,依然显示该报错:

    img

    回复
    你好!机器人 回复 Ken428965 2022-12-08 06:23

    list.splice(index, 1)
    
    

    1
    回复
    Ken428965 回复 你好!机器人 2022-12-08 06:53

    收到
    改成list.splice(index, 1)后,并在这个位置打印:

    img

    点击删除图标,浏览器没有报错,打印结果是:

    img

    回复
    展开全部7条评论
编辑
预览

报告相同问题?

问题事件

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

悬赏问题

  • ¥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】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部