Question

我有以下状态：

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，然后再设置{{1} }处于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);
   }
  }
}

这是正确的方法吗？

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

Answer 2

如果您想使用checkIn_month的当前值更新currentMonth，则不能依靠currentMonth的值立即更新，因为有setState调用异步。您可以改为在传递给setCheckInMonth的回调中将调用移至setCurrentMonth，以便可以访问currentMonth的当前值。

例如：

setCurrentMonth(currentMonth => {
    const newCurrentMonth = currentMonth - 1;
    setCheckInMonth(newCurrentMonth);
    return newCurrentMonth;
});

反应-useState挂钩访问状态

2 个答案: