Как реализовать фильтры в React?

Question

[hewpew]

Вот например я хочу сделать фильтр

const [filters, setFilters] = useState({
        page: 1,
        perPage: 20,
        filters: {
            month: {
                month: new Date().getMonth() + 1,
                year: new Date().getFullYear()
            }
        }
    });

    useEffect(() => {
        loadData();
    }, [filters]);

соответственно вот например фильтр

<MonthPicker
                            value={filters.filters.month}
                            onChange={(val) =>
                                setFilters(prev => ({
                                    ...prev,
                                    filters: {...prev.filters, month: val}
                                }))
                            }
                        />

2 вопроса
1) как сделать проще двустороннее связывание? (не в 5 строк, а в одну-2 хотябы - аналог v-model во вью)
2) useEffect срабатывает когда месяц поменялся на такое же значение(значение такое же, ссылка другая), как сделать чтобы он не отрабатывал в этом случае? (аналог watch во вью)

Comments

[Aetae]

v-model это из-коробочный хэлпер, который делает примерно то же само что ты написал. Если переходишь с vue на react тебе постоянно будет не хватать таких мелочей.:)

Но ты можешь написать свой кастомный и использовать его везде. Или воспользоваться готовой библиотекой для подобного.

Answer 1

[Алексей Уколов]

1) как сделать проще двустороннее связывание? (не в 5 строк, а в одну-2 хотябы - аналог v-model во вью)

В "голом" Реакте - никак.

2) useEffect срабатывает когда месяц поменялся на такое же значение(значение такое же, ссылка другая), как сделать чтобы он не отрабатывал в этом случае? (аналог watch во вью)

Передавать в deps финальные скалярные значения:

-    }, [filters]);
+    }, [filters.month.month, filters.month.year]);