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

Question

我有一个名为calendarLogicHandler()的函数，它设置state，将整个月分散到其中。我在 componentDidMount() 中调用了它。

state 集适用于我正在处理的日历app。该日历工具将成为 Yaga 类(class)应用的一部分。

然后在该工具的周 View 模式(显示一周的所有事件)上，我调用 weekAgendaLogicHandler()，它会过滤当前月份的当前周并将其显示在应用程序。按照我的逻辑，本周和当月的 state 会被进一步操纵，但在这里显示它是没有意义的。

问题是:

我无法在 ComponentDidMount() 上访问 this.state.currrentMonth 并且不知何故，当我尝试 console.log(this.state.currentMonth ) 在 render() 上我看到它渲染 this.state.currentMonth 两次空白，然后，在第三次重新渲染时它最终得到 this.state.currentMonth 由 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]]
[]

如何正确使用此函数，以便我可以调用 weekAgendaLogicHandler() 而无需在 的 callback function 中调用它this.setState({currentMonth})，并在渲染阶段之前设置我的状态，换句话说，在 componentdidmount 之前？

代码是here及以下:

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

这就是 React 的工作方式。

生命周期render()每次更新时都会调用方法。而且它也在 componentDidMount 之前被调用。 。根据生命周期名称componentDidMount表示组件安装后调用的函数。由于组件已经 mounted ，所以render() componentDidMount 之前已经调用过方法方法。

所以，当您第一次获得空白数据时，即在 componentDidMount 之前, render()正在以初始状态调用，即 []

再次，可能有一些东西正在更新，可能在weekAgendaLogicHandler()中功能再次render()被调用时显示空白 []数组，即初始状态。

现在，第三次，this.setState 正在发生，状态正在更新，然后 render()您正在获得所需的数组。

所以，这就是 render()生命周期方法有效。

现在，如果您想使用render仅包含数据，而不包含 null数据。然后，您可以显示某种加载程序。

即，

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