时间戳

首页 > 解决方案 > startDate 上的 useState 不更新我使用 setStartDate 时的日期

reactjs - startDate 上的 useState 不更新我使用 setStartDate 时的日期

问题描述

这是我的代码

import format from "date-fns/format";
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";

const [startDate, setStartDate] = useState<Date>(new Date());

const startTime = setHours(setMinutes(date, 0), hour);
console.log(startTime); // showing correct date and time as I set

setStartDate(startTime);
console.log(startDate); // this is showing current date and time

但是当我这样做时

console.log(startDate);

我得到当前的日期和时间。但是，如果我这样做

console.log(startTime);

它显示了我想要的正确日期和时间。

你能帮忙吗？我正在使用 React 的 tsx 格式。开发人员还有几个小时没有空，我必须快速将其交付给我的客户。

标签： reactjsuse-statetsx

解决方案

useState是一个异步函数。当您尝试读取状态时，它正在执行中，其值尚未更新。考虑以下示例：

//Defining the state
const [startDate, setStartDate] = useState<Date>(new Date());


const startTime = setHours(setMinutes(date, 0), hour); //Calculating new state
console.log(startTime); // Works fine due to synchronouse behaviour

setStartDate(startTime);  //Async, will wait if any other state updates are in pipeline. If not, it'll try to update asynchronously
console.log(startDate); // By the time you reach here it's still updating and pointing to the old value.

如果要读取新值，可以考虑使用useEffect(fn,[]). 在您的情况下，您可以读取一个新状态，如下所示：

const [startDate, setStartDate] = useState<Date>(new Date());

useEffect(()=>{
    console.log(startDate); // Fires whenever startDate changes
  },[startDate])

您可以在此处访问代码和框以进行工作演示。useEffect 此外，您可以在此处和此处阅读更多信息[详细]

推荐阅读