ReactJS useState не обновляет момент JS prop - PullRequest
Новая
       19

ReactJS useState не обновляет момент JS prop

0 голосов
/ 09 июля 2020

Я кодирую приложение CRM, а для gettingTrackers есть функция asny c, и она работает хорошо. Есть еще одна функция, называемая calculateStartTime, и эта функция предполагает вычислить переменную 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

Но когда я нажимаю кнопку для другого компонента, я распечатываю эти переменные и их вывод; 

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

Заранее спасибо!

1 Ответ

0 голосов
/ 09 июля 2020

В приведенном ниже блоке кода вы устанавливаете состояние и сразу же пытаетесь получить доступ к обновленному значению, но обновления состояния выполняются асинхронно c. Вы получите последнее значение при следующем повторном рендеринге. 

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