AgeofCreations
@AgeofCreations
Hardware, SEO.

Как убрать квадратные скобки в запросе фильтров при использовании Table из библиотеки antd?

Привет. Я использую 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, то есть без квадратных скобок.
Поэтому мне нужно перезаписать это поведение.
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы