如何通过在 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(){&nbsp; if(this.state.currentMonth.length){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>Testing componentDidMount</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }&nbsp; else{&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <p>Loading data...</p>&nbsp; &nbsp; &nbsp;)&nbsp; &nbsp;}}

Answer 2

不确定我是否理解您想要完成的任务？也许看看之后的状态如何this.calendarLogicHandler(); this.weekAgendaLogicHandler();？如果是这种情况，请使用componentDidUpdate. componentDidMount你只能看到组件在 dom 中挂载时的状态。所以你console.log按照这个顺序做并不重要：this.calendarLogicHandler();this.weekAgendaLogicHandler();console.log(&nbsp; "getting current month in componentDidMount",&nbsp; this.state.currentMonth);...您仍然像以前一样记录状态并被解雇calendarLogicHandler。weekAgendaLogicHandler更新：如果你不想打电话weekAgendaLogicHandler（componentDidMount因为你还没有你需要的状态），那么你可以使用这样的东西：componentDidUpdate(prevProps, prevState) {&nbsp;if(/* check that state is previously updated by `calendarLogicHandler` */) {&nbsp; this.weekAgendaLogicHandler();&nbsp;}}但是，使用大量时间（挂钩到生命周期事件）会使您的代码变得不必要的复杂。如果我是你，会选择使用setState回调来调用this.weekAgendaLogicHandler()；