问答

Ant design List列表删除某一项后如何自动刷新List

作者:admin 2021-04-20 我要评论

如图所示,Demo页面中有一个List列表,List中的每一项可以动态删除 问题:点击删除后如何自动刷新列表,就是我该如何触发更新呢?(除了使用redux),同时,刷新...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png

如图所示,Demo页面中有一个List列表,List中的每一项可以动态删除

问题:点击删除后如何自动刷新列表,就是我该如何触发更新呢?(除了使用redux),同时,刷新是只有List列表刷新而不是整个页面刷新。

当前代码:

const Demo: React.FC<RentAssetProps> = (props) => {

    const [data, setData] = useState<any[]>([])         //列表查询数据

    const getDataList = () => {

            let Iparam = xxxxxxxx....

            queryList(Iparam).then(res => {
                setData(res.data)  //查询列表数据
            })
        }
    }

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

    //找到删除的项,重新给data数组赋值
    const refreshList = (params:any) => {
        let newData = data;
        data.forEach((item,index)=>{
            if(params.id === item.id){
                newData.splice(index,1);
            }
        })
        setData(newData)
    }

    const handleDelete = (params:any) => {
        //删除接口调用
        deleteCase(
            params,
            ()=> {refreshList(params)},
        )
    }

    const renderShowConfirm = (params:any) => {
        Modal.confirm({
            title: 'Confirm',
            icon: <ExclamationCircleOutlined />,
            content: `确认删除?`,
            onOk() {
                handleDelete(params);
            },
            onCancel() {
                console.log('Cancel');
            },
          });
    }

    const renderList = () => {
        if (data) {
            return (
                <>
                    <List
                        bordered={true}
                        className="demo-loadmore-list"
                        itemLayout="horizontal"
                        dataSource={data}
                        renderItem={
                            item => (
                                <List.Item
                                    key={item.id}
                                    actions={[<a key="list-loadmore-edit1" onClick={() => renderShowConfirm(item)}>删除</a>]}
                                >
                                </List.Item>
                            )}
                    />
                </>
            )
        }
        return (
            <>
                <div>暂无数据</div>
            </>
        )
    }


    return (
        <>
            <Card title={'事件列表'}>
                        {renderList()}
            </Card>
        </>
    )
}
export default Demo
###
  // 删除单条
  const [tableData, setTableData] = useState([]);
  const renderShowConfirm = (id) => {
    setTableData((state) => state.filter((item) => item.id !== id));
  };

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器