Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2020, 17:30
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Не работает одновременно фильтр и поиск в React
У меня есть компонент:

import React, {PureComponent} from 'react'

export default class Shop extends PureComponent {
  state = {
    search: "",
    filters: [],
    items: json
  };

  // проверяем какие фильтры выбрал юзер
  onFilterChange = ( event ) => {
    const checkboxes = [...event.currentTarget.closest(".filter").getElementsByTagName("input")]
    const filters = [];
    checkboxes.map(checkbox => {
      if (checkbox.checked) {
        filters.push(checkbox.name);
      }
    });
    this.setState({ filters }, this.filtredInput);
  }

  // фильтруем согласно выбранным фильтрам
  filtredInput() {
    let items = json

    if (this.state.search.length !== 0) {
      items = items.filter(word =>
        word.name.toLocaleLowerCase().indexOf(this.state.search.toLocaleLowerCase()) !== -1
      )
    }

    if (this.state.filters.length !== 0) {
      items = items.filter(element => this.state.filters.every(key => element[key]));
    }

    this.setState( {items} )
  }

  // смотрим, что вводит юзер
  onSearchChange = ( {currentTarget} ) => {
    const search = currentTarget.value
    this.setState({ search }, this.filtredInput() )
  }

  render() {
    return (
      <div>
        <div className="navigation">
          <Filter
            onFilterChange={this.onFilterChange}
          />
          <Search
            onSearchChange={this.onSearchChange}
          />
        </div>
        <Filtered
              items={this.state.items}
              updateShoppingBasket={this.updateShoppingBasket}
            />
      </div>
    )
  }
}


Помогите организовать логику так, чтобы одновременно работал и поиск, и фильтр. По отдельности всё работает отлично. Но в текущем варианте поиск работает как бы с задержкой (видимо код отрабатывает до установки стейта), но я не уверен в том, что нет других ошибок. Как правильно организовать логику фильтра + поиска?
Ответить с цитированием
  #2 (permalink)  
Старый 09.05.2020, 18:56
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Дополню ответ...

Если изменить функцию:

filtredInput() {
    let items = json

    setTimeout(() => {

      if (this.state.search.length !== 0) {
        items = items.filter(word =>
          word.name.toLocaleLowerCase().indexOf(this.state.search.toLocaleLowerCase()) !== -1
        )
      }

      if (this.state.filters.length !== 0) {
        items = items.filter(element => this.state.filters.every(key => element[key]));
      }

      this.setState( {items} )
    }, 1000);

  }


То всё работает как нужно, только с задержкой. Дело таки в том, что функция выполняется до установки стейта. Пока нет идей как это пофиксить.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 01:03
Живой поиск. Не работает при вставке текста мышкой formus Общие вопросы Javascript 4 13.06.2011 22:50
Cкрипт menu не работает одновременно со скриптом slide Greenex Работа 1 24.03.2011 02:28
Не работает скрипт menu одновременно с другим скриптом Greenex Элементы интерфейса 0 23.03.2011 14:21
Динамическая HTML форма (FireFox - работает, IE - не работает) dm1tr1y Общие вопросы Javascript 10 11.12.2009 15:59