Answer the question
In order to leave comments, you need to log in
How to remove square brackets in filter query when using Table from antd library?
Hello. I'm using Table from https://ant.design/components/table/#components-ta...
and I have a problem with GET parameters of filters
For some reason the request looks like: http://host/filter_name[]=filter_value
Problem in square brackets. My backend provides filters on requests like: http://host/filter_name=filter_value
I googled a lot, crawled through the Issues in their repository and the corresponding tag on SO, but I did not find a single way to override or otherwise change this behavior in an adequate way.
I tried to specify filters in params
like filter_name: filters.filter_name.toString()
and it worked. But if there are more than 1 filters, then this causes a TypeError exception.
Of course, you can check for the existence of an object and if it exists, apply the option above.
But it looks like quite a crutch. I think there is a better way to do this.
Here is my code:
import React from 'react';
import axios from 'axios';
import { Table } from 'antd';
const columns = [
{
title: 'Название',
dataIndex: 'filterpage_name',
key: 'name',
render: (text, record) => <a href={`/crowler/filter-pages/${record.id}`}>{text}</a>,
},
{
title: 'ID',
dataIndex: 'filterpage_id',
key: 'id',
},
{
title: 'URL',
dataIndex: 'filterpage_url',
key: 'filterpage_url',
render: text => <a href={`https://sima-land.ru/${text}`} rel="noopener noreferrer" target='_blank' >{text}</a>,
filters: [{ text: 'Праздники', value: 'prazdniki' }, { text: 'Канцтовары', value: 'kanctovary' }],
},
{
title: 'Активна',
dataIndex: 'filterpage_is_active',
key: 'filterpage_is_active',
filters: [{ text: 'Да', value: '1' }, { text: 'Нет', value: '0' }],
},
];
class FilterpageListView extends React.Component {
state = {
data: [],
pagination: {},
loading: false,
};
componentDidMount() {
this.fetch();
}
handleTableChange = (pagination, filters, sorter) => {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
// .toString().replace(//g,''),
filterpage_url: filters.filterpage_url.toString(),
filterpage_is_active: filters.filterpage_is_active.toString()
});
console.log(filters.filterpage_url.toString())
};
fetch = (params = {}) => {
console.log('params:', params);
console.log('filters', params.filterpage_url);
this.setState({ loading: true });
axios.get('http://0.0.0.0:8000/crowler/filterpage/',{
params: {
...params,
}})
.then(res => {
const pagination = { ...this.state.pagination };
// Read total count from server
// pagination.total = data.totalCount;
pagination.total = res.data.count;
pagination.pageSize = 25
this.setState({
loading: false,
data: res.data.results,
pagination,
});
});
};
render() {
return (
<Table
columns={columns}
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
)
}
}
export default FilterpageListView;
http://host/filter_name[]=filter_value
http://host/filter_name=filter_value
, that is, without square brackets. Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question