When handling user interactions in WeChat Mini Programs, directly invoking lifecycle hooks like onLoad or onReady from within custom event handlers rarely triggers a reliable UI update. Atttempting to bypass this by redirecting via wx.navigateTo often corrupts the navigation stack, causing back-button behavior to revert to stale cached states. A more stable approach involves explicitly refetching the required data payload and replacing the component state using setData.

Consider a scenario where a user submits an absence request through a modal overlay. Upon successful transmission to the backend, the interface must reflect the updated attendance status without reloading the entire route. This is achieved by decoupling the submission logic from the view layer and chaining a fresh data retrieval routine upon receiving a positive server acknowledgment.

The following markup renders a dynamic schedule grid. Each entry displays the course identifier, attendance status, duration details, a progress indicator, and conditional action buttons. A hidden overlay handles input collection before dispatching the network request.

<view class="schedule-container">
  <view wx:for="{{scheduleItems}}" wx:key="itemId" class="item-card">
    <view class="card-header">
      <text class="course-name">{{item.name}}</text>
      <text class="status-badge {{item.status === 'present' ? 'attended' : 'absent'}}">
        {{item.status === '0' ? 'Pending' : 'Completed'}}
      </text>
    </view>
    <view class="divider"></view>
    <view class="metadata">
      <image src="/assets/icon-clock.svg" mode="aspectFit" class="icon" />
      <text>{{item.title}}</text>
    </view>
    <view class="details-section">
      <text class="description">{{item.description}}</text>
    </view>
    <view class="progress-wrapper">
      <text class="label">Completion</text>
      <progress percent="{{item.percentage}}" stroke-width="16" active-color="#4CAF50" background-color="#E8F5E9" />
      <text class="ratio">{{item.completed}}/{{item.total}}</text>
    </view>
    
    <!-- Leave Request Section -->
    <view wx:if="{{!item.isPresented}}" class="action-area">
      <button wx:if="{{!item.hasLeaveRecord}}" bindtap="requestAbsence" data-id="{{item.id}}">Submit Absence</button>
      <view wx:else class="absence-note">Status: {{item.leaveRemark}}</view>
    </view>
    
    <!-- Feedback Section -->
    <view wx:if="{{item.isPresented && item.canFeedback}}" class="action-area">
      <button bindtap="openFeedback" data-id="{{item.id}}">Provide Feedback</button>
    </view>
  </view>

  <!-- Absence Submission Modal -->
  <view class="modal-overlay {{showModal ? 'visible' : 'hidden'}}">
    <view class="modal-content">
      <view class="close-btn" bindtap="hideModal">✕</view>
      <text class="modal-title">Request Absence</text>
      <textarea 
        placeholder="Enter reason for absence" 
        value="{{reasonInput}}" 
        bindinput="handleInputChange"
        focus="{{showModal}}"
      ></textarea>
      <button bindtap="submitAbsenceRequest" data-target-id="{{activeItemId}}">Confirm Submission</button>
    </view>
  </view>
</view>

Corresponding JavaScript logic manages the interaction flow. Instead of forcing a page reload, the handler validates the payload, transmits it asynchronously, and conditional triggers a synchronization method.

Page({
  data: {
    scheduleItems: [],
    userId: '',
    currentDate: '',
    reasonInput: '',
    activeItemId: null,
    showModal: false
  },

  // Initiates the leave request modal
  requestAbsence(e) {
    const itemId = e.currentTarget.dataset.id;
    this.setData({ activeItemId: itemId, showModal: true });
  },

  hideModal() {
    this.setData({ showModal: false, reasonInput: '' });
  },

  handleInputChange(e) {
    this.setData({ reasonInput: e.detail.value });
  },

  // Handles the final submission
  submitAbsenceRequest(e) {
    const targetId = e.currentTarget.dataset.targetId;
    const reason = this.data.reasonInput.trim();

    if (!reason) return wx.showToast({ title: 'Please provide a reason', icon: 'none' });

    const payload = {
      student_uid: this.data.userId,
      session_id: targetId,
      absence_reason: reason
    };

    this.requestAPI('/api/v1/student/attendance', 'POST', payload)
      .then(response => {
        if (response.code === 200) {
          wx.showToast({ title: 'Request recorded', icon: 'success' });
          this.hideModal();
          this.syncScheduleData(this.formatDate(this.data.currentDate));
        } else {
          wx.showToast({ title: 'Operation failed', icon: 'error' });
        }
      })
      .catch(err => console.error('Submission error:', err));
  },

  // Fetches updated schedule from backend
  syncScheduleData(targetDate) {
    const params = { time: targetDate, user_id: this.data.userId };
    
    this.requestAPI('/api/v1/student/daily-schedule', 'POST', params)
      .then(data => {
        const items = data.items || [];
        const members = data.enrolledStudents || [];
        
        this.setData({
          hasRecords: items.length > 0,
          scheduleItems: items,
          roster: members
        });
      })
      .catch(err => console.warn('Refresh failed:', err));
  },

  // Utility wrapper for network requests
  requestAPI(endpoint, method, body) {
    const BASE_URL = 'https://example.com';
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${BASE_URL}${endpoint}`,
        method: method,
        data: body,
        header: { 'Content-Type': 'application/json' },
        success: res => resolve(res.data),
        fail: err => reject(err)
      });
    });
  },

  // Date formatting helper
  formatDate(dateObj) {
    const y = dateObj.getFullYear();
    const m = String(dateObj.getMonth() + 1).padStart(2, '0');
    const d = String(dateObj.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  }
});

By isolating state mutations from page lifecycle events and relying on explicit data repalcement, the interface remains predictable. This pattern guarantees that subsequent UI renders reflect the latest server state without interfering with the mini program's built-in routing mechanisms.