Question

我有一个React组件（用于预订会议或任务的类似Google日历的程序），它以基于当前周的初始状态开始。过去，每当加载页面时，日历始终在当前周开始。然而，最近我添加了一项功能，以便如果您在未来3周内导航并创建会议，则会记录一个cookie并且页面会刷新并保持＆＃34;将来＆＃34;通过将cookie日期设置为状态。但是，如果您导航到未来3周，请不要预订任何内容，然后在返回日历页面之前查看其他页面，它将以当前周作为开始状态加载。我的cookie工作正常，但问题是，当你导航到未来，访问另一个页面，然后回到日历页面，它会显示＆＃34; old＆＃34;在显示适当的＆＃34;新＆＃34;之前约半秒的未来状态当前日/周的状态。我尝试了不同的安装和卸载方法，但都没有解决问题。无论如何，页面总是显示＆＃34;未来＆＃34;的日历数据和日期。在正确显示当前周数据之前。

var MasterSchedule = React.createClass({
  getInitialState() {
    var start = Cookies.get('master_week_start');
    var end = moment(start).endOf('week').format("YYYY-MM-DD");
    var referrer = this.props.referrer;
    if (start != null && referrer.includes("schedule")) {
      return {
        currentWeekStart: start,
        currentWeekEnd: end,
        users: this.props.users,
        closures: []
      }
    } else {
      Cookies.remove('master_week_start');
      return {
        currentWeekStart: moment().startOf('week').format("YYYY-MM-DD"),
        currentWeekEnd: moment().endOf('week').format("YYYY-MM-DD"),
        users: this.props.users,
        closures: []
      }
    }
  },
...
render() {
var currentWeekStart = this.state.currentWeekStart;
var currentWeekEnd = this.state.currentWeekEnd;
var monday = moment(currentWeekStart).add(1, 'day').format("M.DD");
var offset = 0;
var currentWeek = [];
while (offset < 5) {
  currentWeek.push(moment(monday).add(offset++, 'd').format("M.DD"));
};
...
return (
  <div>
    <div className="date-nav">
      <div className="col s12">
        <div className="row card task-card light-gray valign-wrapper">
          <div className="col s2 m1">
            <i className="black-text right material-icons md-36">date_range</i>
          </div>
          <div className="col s6 m3 l2">
            {this.renderDateDisplay()}
          </div>
          <div className="col s1">
            <a className="black-text right" id="prevWeek" onClick={prevWeek}><i className="material-icons">keyboard_arrow_left</i></a>
          </div>
          <div className="col s1">
            <a className="black-text" id="upcomingWeek" onClick={upcomingWeek}><i className="material-icons">keyboard_arrow_right</i></a>
          </div>
          <div className="col s0 m4 l6">
          </div>
          <div className="col s2 m2 l1">
            <a className="black-text" id="resetWeek" onClick={resetWeek}>Today</a>
          </div>
        </div>
      </div>
    </div>
    <div className="row frame-row dark-gray-text">
      <div className="row frame-row">
        <div className="col s2 hide-on-small-only left">
          <p className="padding-top-user">User</p>
        </div>
        <div className="col s2 center hide-on-small-only">
          <p className="no-bottom-margin">Monday</p>
          <p className="no-top-margin">{currentWeek[0]}</p>
        </div>
        <div className="col s2 center hide-on-small-only">
          <p className="no-bottom-margin">Tuesday</p>
          <p className="no-top-margin">{currentWeek[1]}</p>
        </div>
        <div className="col s2 center hide-on-small-only">
          <p className="no-bottom-margin">Wednesday</p>
          <p className="no-top-margin">{currentWeek[2]}</p>
        </div>
        <div className="col s2 center hide-on-small-only">
          <p className="no-bottom-margin">Thursday</p>
          <p className="no-top-margin">{currentWeek[3]}</p>
        </div>
        <div className="col s2 center hide-on-small-only">
          <p className="no-bottom-margin">Friday</p>
          <p className="no-top-margin">{currentWeek[4]}</p>
        </div>
      </div>
    </div>
    <div className="divider"></div>
    {this.renderUserRows()}
    <div className="divider"></div>
  </div>

从此处，MasterSchedule呈现基本日历布局，日历中每个用户的行，一周中每天的列，然后根据需要呈现会议或预订的各个组件。总而言之，这下面有4个孩子。

这是日历简要呈现＆＃34; future＆＃34;在我回到页面后：

然后它又回到当前周：

但我需要摆脱旧的＆＃34;未来＆＃34;的瞬间重现。数据。谢谢！

Answer 1

对道具或州的更改可能会导致更新。 componentWillReceiveProps()将帮助您解决问题。 checkout this页面了解更多反应组分的生命周期方法

在重新加载React组件的页面之后，先前的状态会暂时保留

1 个答案: