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

Question

如图所示，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

Answer 1

  // 删除单条
  const [tableData, setTableData] = useState([]);
  const renderShowConfirm = (id) => {
    setTableData((state) => state.filter((item) => item.id !== id));
  };