Как возвращать сразу новое состояние из useState после изменения?

Question

[Shiva6]

Приветствую всех, читающих этот вопрос!
Есть селектор, value которого работает как фильтр:

const { Option } = Select;
  const dispatch = useDispatch();
  const [filters, setFilters] = useState({status: null});

  <Select
      style={{ width: 100 }}
      placeholder="Статус"
      optionFilterProp="children"
      onChange={onChangeStatus}>
    <Option value="created">Создан</Option>
    <Option value="added">Добавлен</Option>
    <Option value="photo">Фотография продукта</Option>
  </Select>

При выборе одного из значений внутри селектора срабатывает событие, изменяющее состояние;

function onChangeStatus(value) {
    setFilters({ status: value})
    dispatch(getFilters(filters));
  }

Но дело в том, что в action приходит старое состояние {status: null}, никак не могу написать правильно асинхронность, чтобы успело поменяться состояние и лишь потом сработал dispatch. Переписывал функцию в вот такой вид, но в консоли ошибка.

function onChangeStatus (value) {
    setFilters({
      ...filters, status: value
    }, () => {
      dispatch(getFilters(filters));
    });
  }

Заранее благодарен за любую помощь!

Answer 1

[Guccigang]

А почему бы не передавать в `getFilters` сразу { status: value }, к которому у нас есть доступ в функции?

Comments

[Shiva6]

Это упрощенный пример, на самом деле в filters несколько свойств лежит, так как присутствует пять разных селекторов

[Guccigang]

Как насчёт использовать useEffect с зависимостью на filters?

[Shiva6]

Guccigang, это хорошая идея, только я не знаю как прописать эту зависимость.

[Guccigang]

Shiva6,
useEffect(() => {
dispatch(getFilters(filters));
}, [filters]);

[Guccigang]

Shiva6,
На случай, если тригерить нужно только при обновлении фильтров (в примере выше, будет тригерить так же при первом рендере):

const mounted = useRef();
useEffect(() => {
if (!mounted.current) {
mounted.current = true;
} else {
dispatch(getFilters(filters));
}
}, [filters]);

[Shiva6]

Guccigang, огромное спасибо! Долго уже сижу работаю, как уперся в эту задачку голова совсем не хотела работать.

Answer 2

[Miniwe]

...
onChange={value => setFilters({status: value})}>
...
useEffect(() => {
dispatch(getFilters(filters));
}, [filters])