Блог

У меня есть пользовательская таблица со свойством filters. 3 фильтра жестко запрограммированы, но 1 из фильтров собирается с помощью POST-запроса из нашего API, потому что их параметры фильтра часто обновляются в нашей базе данных людьми, не занимающимися инженерными разработками.

Моя проблема в том, что когда вы нажимаете кнопку «Назад», чтобы перейти на страницу с этой пользовательской таблицей, на страницу добавляются дубликаты фильтров Gateways. Этот элемент исчезает при обновлении страницы, что продемонстрировало мне, что я столкнулся с проблемой с состоянием. Как я могу сделать так, чтобы фильтр Gateways отображался только один раз?

Вот код для таблицы:

        <CredcapTable
          defaultSort="created_at"
          cols={cols}
          filters={filters}
          searchFunc={this.searchFunc}
          recordMappingFunc={this.recordMappingFunc}
        />  

Вот функция, которая извлекает фильтры Gateways из базы данных, которая вызывается в componentDidMount:

   private loadFilters = () => {
    searchGateways(this.props.app.api, new SearchRequest()).then((res: SearchResults<Gateway>) => {
      const opts = new Array<any>();
      opts.push({ label: "All", value: "*" });

      res.results.map((g: Gateway) => {
        opts.push({ label: `${g.name} [${g.code}]`, value: g.id });
      });

      filters.push({
        field: "gateway_id",
        label: "Gateway",
        options: opts
      });

      this.setState({ filters });

    });
  };