当我使用 setStartDate 时，startDate 上的 useState 没有更新日期

Question

这是我的代码

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 格式。开发人员在接下来的几个小时内无法使用，我必须尽快将其交付给我的客户。

Answer 1

最后两行你做错了

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

如果您将 startDate 设置为 startTime，它肯定会显示当前日期并且 time.Hopefully 它有效

Answer 2

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 here for a working demo. Also, you can read more about useEffect here and here[详细]

当我使用 setStartDate 时，startDate 上的 useState 没有更新日期

useState on startDate not updating the date when I use setStartDate

reactjs

tsx

use-state