Реагировать на лучшие практики фильтра

Question

Как не потерять React состояние в этом случае, когда я делаю фильтр?

Когда я делаю фильтр, я теряю свое предыдущее состояние и работа программы не корректна, например, если я выбираю категорию спорт, затем пробую категорию моды, я ничего не вижу в моде, случай, когда все это было отброшено, когда я выберите спорт.

Я новичок в React. Хотелось бы услышать лучшие практики.

    FilterCategory(e) {
    // Filter
    const filter = this.state.items.filter(
      (item) => {
        return item.category.indexOf(e.target.name) !== -1
      }
    )
    // Update state
    this.setState({
      items:filter
    })
  }

Answer 1

Почему бы не использовать строку запроса для хранения фильтров.

Предположим, ваш URL-адрес / products и выбранный фильтр, скажем, пол мужской.затем вы можете добавить /products?gender=male.

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

Если вы дополнительно выберете другие фильтры, просто добавьте новые фильтры снова, чтобы запросить параметры, такие как field1 = value1 & field2 = value2 & field3 = value3 ...

И снова, когда реквизиты реагирования местоположения изменят васполучит новые параметры в компоненте.

Преимущества этой техники.1) Нет головной боли от поддержания состояния.Хранение фильтров в состоянии может стать сложным и неуклюжим, если не будет сделано должным образом.

2) Нет проблем, если страница обновляется.Предположим, ваш пользователь выбрал фильтры и, если страница обновится, все фильтры будут потеряны при сохранении в состоянии.Но если строка запроса выполнена, она останется нетронутой.

По этой причине я думаю, что строка запроса является лучшим вариантом, чем состояние.

Answer 2

Проблема в том, что вы устанавливаете элементы в фильтрованный массив, возвращаемый фильтром.

Вы можете использовать другое свойство в вашем состоянии для хранения элемента цели, поэтому вы сохраняете свои элементы такими, какие они есть,как то так:

this.state({
 items: [...yourItems],
 chosenItem: []
})

filterCategory(e) {
 let filter = this.state.items.filter((item) => {
   item.category.indexOf(e.target.name) !== -1
 })
// Update state keeping items intact
 this.setState({
  chosenItem: filter
 })
}

Answer 3

Вы можете просто сохранить и обновить запрос filter в состоянии и вернуть только отфильтрованные элементы в функции render вместо обновления состояния.

class App extends React.Component {
  state = {
    items: [
      { category: ['fashion'], name: 'Gigi Hadid', id: 1 },
      { category: ['sports'], name: 'Lebron James', id: 2 },
      { category: ['fashion', 'sports'], name: 'Michael Jordan', id: 3 },
      { category: ['sports', 'tech'], name: 'Andre Iguodala', id: 4 },
      { category: ['tech'], name: 'Mark Zuckerberg', id: 5 },
    ],
    filter: '',
  }

  handleChange = (e) => {
    this.setState({ filter: e.target.value });
  }

  render() {
    const { items, filter } = this.state;
    let shownItems = items;
    if (filter) {
      shownItems = items.filter(({ category }) => category.includes(filter));
    }
    return (
      <div>
        <select value={filter} onChange={this.handleChange}>
          <option value="">All</option>
          <option value="fashion">Fashion</option>
          <option value="sports">Sports</option>
          <option value="tech">Tech</option>
        </select>
        <div>
          <ul>
            {shownItems.map(({ name, id }) => <li key={id}>{ name }</li>)}
          </ul>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 4

Просто сохраните отфильтрованные значения как другое свойство состояния.

state = {
  items: [],
  filteredItems: []
}

При выполнении фильтрации всегда обращайтесь к items и переопределяйте filteredItems

filterItems(e) {
  const filtered = this.state.items.filter(
    (item) => {
      return item.category.indexOf(e.target.name) !== -1
    }
  )

this.setState({filteredItems: filtered});
}