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

Question

我有一个名为calendarLogicHandler()which sets的函数state，将整整一个月的时间分布在其中。我在里面叫它componentDidMount()。该套装适用于我正在处理state的日历。app这个日历工具将成为瑜伽课程的一部分app。然后在显示单周所有事件的工具的周视图模式下，我调用weekAgendaLogicHandler()，过滤当月的当前周并显示在app. 在我的state逻辑中，当周和当月的值被进一步操纵，但在这里显示它是没有意义的。问题是：我无法访问this.state.currrentMonth，ComponentDidMount()不知何故，当我尝试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 functionthis.setState({currentMonth})componentdidmount

Answer 1

这就是 react 的工作方式。

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

因此，当您第一次获得空白数据时，即 before componentDidMount，render()以初始状态被调用，即，[]

第二次，可能在weekAgendaLogicHandler()函数中可能正在更新某些东西，因为它再次render()被空白[]数组调用，即初始状态。

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

所以，这就是render()生命周期方法的工作原理。

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

IE，

render(){

  if(this.state.currentMonth.length){

    return(

      <div className="App">

        <h1>Testing componentDidMount</h1>

      </div>

    )

  }

  else{

    return(

      <p>Loading data...</p>

     )

   }

}

Answer 2

不确定我是否理解您想要完成的任务？也许看看之后的状态如何this.calendarLogicHandler(); this.weekAgendaLogicHandler();？

如果是这种情况，请使用componentDidUpdate. componentDidMount你只能看到组件在 dom 中挂载时的状态。

所以你console.log按照这个顺序做并不重要：

this.calendarLogicHandler();

this.weekAgendaLogicHandler();

console.log(

  "getting current month in componentDidMount",

  this.state.currentMonth

);

...您仍然像以前一样记录状态并被解雇calendarLogicHandler。weekAgendaLogicHandler

更新：

如果你不想打电话weekAgendaLogicHandler（componentDidMount因为你还没有你需要的状态），那么你可以使用这样的东西：

componentDidUpdate(prevProps, prevState) {

 if(/* check that state is previously updated by `calendarLogicHandler` */) {

  this.weekAgendaLogicHandler();

 }

}

但是，使用大量时间（挂钩到生命周期事件）会使您的代码变得不必要的复杂。如果我是你，会选择使用setState回调来调用this.weekAgendaLogicHandler()；