startDate 上的 useState 不更新我使用 setStartDate 时的日期答案

【问题标题】：useState on startDate not updating the date when I use setStartDatestartDate 上的 useState 不更新我使用 setStartDate 时的日期
【发布时间】：2020-12-22 05:10:35
【问题描述】：

这是我的代码

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 格式。开发人员还有几个小时没有空，我必须尽快将其交付给我的客户。

【问题讨论】：

setHours 是一个调度函数吗？如果不是，那是什么？调度函数不返回任何内容
@CertainPerformance 对于setMinutes 也有同样的问题
我正在使用这样的 date-fns import setHours from "date-fns/setHours";从“date-fns/setMinutes”导入 setMinutes；

标签： reactjs use-state tsx

【解决方案1】：

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

您可以在此处访问codesandbox 进行工作演示。另外，你可以阅读更多关于useEffecthere和here[详细]

【讨论】：

谢谢你的帮助，你是救命的:)

【解决方案2】：

你在最后两行做错了

setStartDate(startTime);
console.log(startDate);

如果您将 startDate 设置为 startTime，它肯定会向您显示当前日期和时间。希望它能正常工作

【讨论】：