Привет. Я использую Table из
https://ant.design/components/table/#components-ta...
и у меня проблема с GET-параметрами фильтров
Почему-то реквест выглядит как:
http://host/filter_name[]=filter_value
Проблема в квадратных скобках. Мой бэкенд предоставляет фильтры по запросу типа:
http://host/filter_name=filter_value
Я долго гуглил, ползал по Issues у них в репозитории и по соответствующему тегу на SO, но так и не нашёл ни единого способа перезаписать или ещё как-то изменить это поведение адекватным путём.
Я пытался указать фильтры в
params
как
filter_name: filters.filter_name.toString()
и это сработало. Но если фильтров более 1, то это вызывает эксепшн TypeError.
Конечно, можно сделать проверку на существование объекта и если существует, применить вариант выше.
Но это выглядит как совсем костыль. Мне кажется, есть более подходящий способ для этого.
Вот мой код:
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;
Собственно, TL;DR:
Их вариант передаёт ...filters как объект, который в итоге превращается в массивы. И передаёт запрос в виде:
http://host/filter_name[]=filter_value
а мой бэкэнд отдаёт фильтры по запросу:
http://host/filter_name=filter_value
, то есть без квадратных скобок.
Поэтому мне нужно перезаписать это поведение.