如何通过在 ComponentDidMount() 中调用的函数访问状态集

Question

I have a function called calendarLogicHandler() which sets state , spreading a whole month into it. I called it inside componentDidMount() .

the state set works on the calendar app which I am working on. This calendar tool will be part of a yoga classes app .

then on the week View Mode of the tool, which displays all of events of a single week, I call weekAgendaLogicHandler() , which filters the current week of the current month and displays it on the app . The state for the current week and current month are manipulated further ahead in my logic, but there is no point in displaying this here.

The issue is:

I cannot access this.state.currrentMonth on ComponentDidMount() and somehow I see that when I try to console.log(this.state.currentMonth) on render() I see that it renders this.state.currentMonth twice blank, then, on the third re-rendering it finally gets the this.state.currentMonth set by calendarLogicHandler() .

current month in render() []
current month in render() []
getting current month in componentDidMount []
current month in render() [Array[7], Array[7], Array[7], Array[7], Array[7]]
current month in render() [Array[7], Array[7], Array[7], Array[7], Array[7]]
[]

How could I properly use this function so I can call weekAgendaLogicHandler() without having it called inside the callback function of this.setState({currentMonth}) , and setting my state before the rendering phase, in other words, before componentdidmount ?

the code is here and below:

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  state = {
    currentWeek: [],
    currentMonth: [],
    monthGetter: new Date().getMonth(),
    yearGetter: new Date().getFullYear()
  };

  componentDidMount() {
    this.calendarLogicHandler();
    this.weekAgendaLogicHandler();
    console.log(
      "getting current month in componentDidMount",
      this.state.currentMonth
    );
  }

  weekAgendaLogicHandler = () => {
    let currentWeek = this.state.currentMonth
      .filter(week => week.includes(new Date().setHours(0, 0, 0, 0)))
      .flat();
    this.setState({ currentWeek }, () => console.log(this.state.currentWeek));
  };

  calendarLogicHandler = () => {
    const oneDay = 86400000;
    const lastDayOfTheMonth = new Date(
      this.state.yearGetter,
      this.state.monthGetter + 1,
      0
    ).getDate();
    let currentMonth = [
      new Date(this.state.yearGetter, this.state.monthGetter, 1).valueOf()
    ]; //starts on month day 1
    for (let i = 1; i < lastDayOfTheMonth; i++) {
      //push the entire month
      currentMonth.push(Math.max.apply(null, currentMonth) + oneDay);
    }
    //localize the first date of the month dates array and check what day of the week it is
    //spread the days of the week, which are the remaining days of prev month to fill calendar first week
    for (let i = new Date(Math.min(...currentMonth)).getDay(); i > 0; i--) {
      currentMonth.unshift(Math.min.apply(null, currentMonth) - oneDay);
    }
    //spread the days of the week, which are the remaining days of prev month to fill calendar last week
    for (let i = new Date(Math.max(...currentMonth)).getDay(); i < 6; i++) {
      currentMonth.push(Math.max.apply(null, currentMonth) + oneDay);
    }
    let monthInWeeks = [];
    for (let i = 0; i < currentMonth.length; i += 7) {
      let chunk = currentMonth.slice(i, i + 7);
      monthInWeeks.push(chunk);
    }
    currentMonth = monthInWeeks;
    this.setState({ currentMonth });
  };

  render() {
    console.log("current month in render()", this.state.currentMonth);
    return (
      <div className="App">
        <h1>Testing componentDidMount</h1>
      </div>
    );
  }
}

Answer 1

This is the way how react works.

Lifecycle render() method gets called on every update. And also it gets called before componentDidMount . According to the lifecycle name componentDidMount means function getting called after component got mounted. And since component got already mounted , so render() method already got called before componentDidMount method.

So, first time when you are getting blank data ie, before componentDidMount , render() is getting called with the initial state ie, []

Second time again, probably something is getting updated probably in weekAgendaLogicHandler() function due to which again render() is getting called with blank [] array ie., the initial state.

Now, third time , this.setState is happening state is getting updated and then on render() you are getting the required array.

So, this is how render() lifecycle method works.

Now, if you want to use render only with the data and not null data. Then , you can show some kind of loader.

ie,

render(){
  if(this.state.currentMonth.length){
    return(
      <div className="App">
        <h1>Testing componentDidMount</h1>
      </div>
    )
  }
  else{
    return(
      <p>Loading data...</p>
     )
   }
}

Answer 2

Not sure that I understand what do you want to accomplish? Maybe to see how state looks like after this.calendarLogicHandler(); this.weekAgendaLogicHandler();this.calendarLogicHandler(); this.weekAgendaLogicHandler(); ?

If that is the case use componentDidUpdate . In componentDidMount you can only see how state looks like at the time component get mounted in the dom.

So it doesn't matter that you are doing console.log in this order:

this.calendarLogicHandler();
this.weekAgendaLogicHandler();
console.log(
  "getting current month in componentDidMount",
  this.state.currentMonth
);

... you are still logging the state as it was before calendarLogicHandler & weekAgendaLogicHandler are fired.

Update:

If you don't wan't to call weekAgendaLogicHandler in componentDidMount (because you don't already have state in shape you need), than you can use something like this:

componentDidUpdate(prevProps, prevState) {
 if(/* check that state is previously updated by `calendarLogicHandler` */) {
  this.weekAgendaLogicHandler();
 }
}

But, using a lot timing (hooking into lifecycle events) can make your code unnecessary complex. If I were you, would choose to use setState callback to call this.weekAgendaLogicHandler() ;