ReactJS useState 不更新 momentJS 道具

Question

I am coding a CRM app and there's a asnyc function for gettingTrackers and it working well. There's another function called calculateStartTime and this function suppose to calculate momentJS variable and set it but this is not updating.

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

The problem is that I have to send startTime and endTime to another ReactJS component, and it sends first initial today value every time. When I call calculateStartTime it logs

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

But when I click to button for another component, I print these variables and its output;

2020-07-09
2020-07-09

as initial values. I log them with using startTime and endTime as I described in useState

What I am missing on this problem? Is there any memory-leak to not-working?

Edit:

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

Thanks in advance!

Answer 1

With the below code block, you are setting the state and immediately you are trying to access the updated value, but state updates done in async fashion. You will get the latest value in the next re-render.

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

You can use a useEffect to log or do something with latest values of startTime and endTime.

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