Блог

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

Знаете ли вы, есть ли лучшее решение для этого?

 const [day, setDay] = useState(null);
const [month, setMonth] = useState(day);

const onNextClick = useCallback(() => {
  setDay((day) => {
    const newDate = addDays(day, 1);
    if (newDate.getMonth() !== day.getMonth()) {
      setMonth((month) => addMonths(month, 1));
    }
    return newDate;
  });
}, []); // keep the function reference
  

Это не очень хорошая практика. согласно https://reactjs.org/docs/hooks-state.html
Вам не нужно использовать много переменных состояния. Переменные состояния могут прекрасно содержать объекты и массивы, так что вы все равно можете группировать связанные данные вместе. Однако, в отличие от this.setState в классе, обновление переменной состояния всегда заменяет ее, а не объединяет. в вашем случае у вас могло бы быть что-то вроде этого:

 const [date, setDate] = useState(null);

const onNextClick = useCallback(() => {

setDate((date) => {
const newDate = addDays(date.day, 1);
if (newDate.getMonth() !== date.day.getMonth()) {
  const newMonth = addMonths(date.month, 1));
}
return {day: newDate, month:newMonth};
});
}, []); // keep the function reference
  

обработка даты как объекта с полями дня и месяца.
надеюсь, это поможет.