ReactJS useState 不更新 momentJS 道具

Question

我正在編寫一個 CRM 應用程序，並且有一個 asnyc function 用於獲取gettingTrackers ，並且運行良好。 還有另一個 function 稱為calculateStartTime和這個 function 假設計算momentJS變量並設置它，但這不是更新。

useEffect(() => {
    async function gettingTrackers() {
      await getTrackers(null, null);
    }

    gettingTrackers();
    calculateStartTime();
}, []);


const [startTime, setStartTime] = useState(moment().format("YYYY-MM-DD"));
const [endTime, setEndTime] = useState(moment().format("YYYY-MM-DD"));

const calculateStartTime = () => {
const dateOfMay = moment("2020-05-01");
const now = moment();

let timeTheStart = null;
let timeTheEnd = null;

if (now.add(-32, "d").diff(dateOfMay) <= 0) {
   timeTheStart = dateOfMay.format("YYYY-MM-DD")
   timeTheEnd = moment().add(-2, "d").format("YYYY-MM-DD");
} else {
   timeTheStart = moment().add(-32, "d").format("YYYY-MM-DD");
   timeTheEnd = moment().add(-2, "d").format("YYYY-MM-DD");
}

console.log("calculating...")
console.log("start time > ", timeTheStart)
console.log("end time > ", timeTheEnd);


setStartTime(moment(timeTheStart).format("YYYY-MM-DD"))
setEndTime(moment(timeTheEnd).format("YYYY-MM-DD"))

// these 2 logs prints initial value, not updated value.
console.log(startTime);
console.log(endTime)
}

問題是我必須將startTime和endTime發送到另一個 ReactJS 組件，並且它每次都發送第一個初始今天值。 當我調用calculateStartTime它記錄

calculating...
start time >  2020-06-07
end time >  2020-07-07

但是當我單擊另一個組件的按鈕時，我會打印這些變量及其 output；

2020-07-09
2020-07-09

作為初始值。 我使用startTime和endTime記錄它們，正如我在useState中描述的那樣

我在這個問題上缺少什么？ 不工作是否有任何內存泄漏？

編輯：

const goToResultButton = (event, data) => {
    event.preventDefault();
    
    console.log("start time > ", startTime)
    console.log("end time  > ", endTime)
}

提前致謝！

Answer 1

使用下面的代碼塊，您正在設置 state 並立即嘗試訪問更新的值，但 state 更新以異步方式完成。 您將在下一次重新渲染中獲得最新值。

    ...
    setStartTime(moment(timeTheStart).format("YYYY-MM-DD"))
    setEndTime(moment(timeTheEnd).format("YYYY-MM-DD"))

    // these 2 logs prints initial value, not updated value.
    console.log(startTime);
    console.log(endTime)
   ...

您可以使用useEffect記錄或使用 startTime 和 endTime 的最新值執行某些操作。

useEffect(() => {
  console.log("startTime", startTime);
  console.log("endTime", endTime);
}, [startTime, endTime]);