javascript - react -useState Hook 访问状态

我有以下状态:

let [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
const [checkIn_month, setCheckInMonth] = useState(null);

我有一个click event listener直接分配给到JSX's元素tbody了。使用event delegation单击td elements。

在以下功能中，如果我单击上个月的某一天，则需要递减currentMonth state，之后再将其设置为currentMonth状态的新值setCheckInMonth。

问题是:

当我使用setCheckInMonth(currentMonth)状态挂钩时，它给出的是旧值，而不是新值。

let [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
const [checkIn_month, setCheckInMonth] = useState(null);

const selectDate = e => {

 if (e.target.tagName === 'TD') {

   if (e.target.classList.contains('previous-month-day')) {
    setCurrentMonth(currentMonth => currentMonth - 1);
    setCheckInMonth(currentMonth);
   }
  }
}

如果我做这样的事情怎么办:

setCurrentMonth(currentMonth => currentMonth - 1);
setCheckInMonth(currentMonth - 1);

这是正确的做法吗？

最佳答案

setState() is asynchronous。它不会立即变异(更新)对象。因此，这样做-

setCurrentMonth(currentMonth => currentMonth - 1);

并不意味着currentMonth具有更新的值，您可以在下一行中立即使用它。

您可以做的是-

const newCurrentMonth = currentMonth - 1;
// now use this newCurrentMonth to update the state.
setCurrentMonth(newCurrentMonth );
setCheckInMonth(newCurrentMonth );