javascript - React - useState 钩子(Hook)访问状态

Question

我有以下状态:

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

我有一个点击事件监听器，直接分配给JSX的元素tbody。使用事件委托(delegate)点击td元素。

在下面的函数中，如果我点击上个月中的一天，我需要递减currentMonth状态，然后设置新值currentMonth 处于 setCheckInMonth 状态。

问题是:

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

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);

这是正确的做法吗？

Answer 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 );