Каким образом осуществить процесс фильтрации?

Question

Leah

javascript , react

Каким образом осуществить процесс фильтрации?

Как реализовать фильтрацию в приложении на React?

20 октября 2023 г. 14:48

Ответы на вопрос 3

Answer 1

Фильтрация может быть реализована различными способами в React. Вот несколько возможных методов:

1. Использование состояния компонента: Вы можете сохранить данные, которые необходимо отфильтровать, в состоянии компонента, а затем использовать методы состояния, такие как `map` или `filter`, для фильтрации данных в соответствии с заданными условиями. После фильтрации результат можно отобразить на странице.

Пример:

```jsx
import React, { useState } from 'react';

const App = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'item 1', category: 'category 1' },
    { id: 2, name: 'item 2', category: 'category 2' },
    { id: 3, name: 'item 3', category: 'category 1' },
  ]);

  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item =>
    item.category.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;
```

2. Использование библиотеки для управления состоянием, такой как Redux или MobX: Эти библиотеки предоставляют удобные средства для управления состоянием приложения, включая фильтрацию данных. Вы можете создать действия для изменения фильтра и использовать селекторы для получения отфильтрованных данных.

Пример (с использованием Redux):

```jsx
import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const initialState = {
  items: [
    { id: 1, name: 'item 1', category: 'category 1' },
    { id: 2, name: 'item 2', category: 'category 2' },
    { id: 3, name: 'item 3', category: 'category 1' },
  ],
  filter: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_FILTER':
      return { ...state, filter: action.payload };
    default:
      return state;
  }
};

const setFilter = filter => ({
  type: 'SET_FILTER',
  payload: filter,
});

const App = () => {
  const items = useSelector(state =>
    state.items.filter(item =>
      item.category.toLowerCase().includes(state.filter.toLowerCase())
    )
  );
  const dispatch = useDispatch();

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={e => dispatch(setFilter(e.target.value))}
      />
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

const store = createStore(reducer);

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default Root;
```

Это лишь два из возможных подходов к реализации фильтрации в приложении на React. В зависимости от требований вашего приложения, вы можете выбрать наиболее подходящий подход.

Answer 2

const [selected, setSelected] = useState('all');

let filteredTodos;
switch(selected) {
  case 'all':
    filteredTodos = todos;
    break;
  case 'checked':
    filteredTodos = todos.filter(todo => todo.checked);
    break;
  case 'notChecked':
    filteredTodos = todos.filter(todo => !todo.checked);
    break;
}

Answer 3

 const [selected, setSelected] = useState('all');

const filteredTodos = useMemo(() => {
  switch(selected) {
    case 'all':
      return todos;
    case 'checked':
      return todos.filter(todo => todo.checked);
    case 'notChecked':
      return todos.filter(todo => !todo.checked);
  }
}, [selected, todos])