React应用中FetchAPI模拟服务器获取日期可用时段报错求助

问题根源 #

1. 初始化调用fetchAPI无参数：initializeTimes中直接调用fetchAPI()，但mockAPI的fetchAPI需要传入日期参数，否则会触发No available times for the selected date错误。
2. Reducer未处理成功更新的action：获取到时段后dispatch的update_times_success没有对应的case，导致state无法更新，时段列表不刷新。
3. 初始化逻辑不规范：initializeTimes作为reducer的初始状态函数，不应包含异步操作，异步加载应放在useEffect中执行。

修正后的代码 #

1. BookingPage.js

import BookingForm from './BookingForm'
import React, {useReducer, useEffect} from 'react'
import {fetchAPI} from './mockAPI'

export default function BookingPage() {
  const [availableTimes, dispatch] = useReducer(updateTimes, [
    '17:00',
    '18:00',
    '19:00',
    '20:00',
    '21:00',
    '22:00'
  ]);

  // 组件挂载后加载初始时段数据
  useEffect(() => {
    const defaultDate = '2023-11-29';
    fetchAPI(defaultDate)
      .then(times => {
        dispatch({ type: 'update_times_success', availableTimes: times });
      })
      .catch(error => {
        console.error('Error fetching available times:', error);
      });
  }, []);

  function updateTimes(state, action) {
    switch (action.type) {
      case 'update_times':
        const { selectedDate } = action;
        console.log('Selected Date(2):', selectedDate);

        fetchAPI(selectedDate)
          .then(times => {
            dispatch({ type: 'update_times_success', availableTimes: times });
          })
          .catch(error => {
            console.error('Error fetching available times:', error);
          });
        return state;
      // 新增成功更新时段的处理逻辑
      case 'update_times_success':
        return [...action.availableTimes];
      default:
        return state;
    }
  }

  const handleDateChange = (selectedDate) => {
    console.log('Selected Date(1): ', selectedDate)
    dispatch({ type: 'update_times', selectedDate });
  };

  return (
    <>
      <div id='booking'>
        <BookingForm
          availableTimes={availableTimes}
          handleDateChange={handleDateChange}
        />
      </div>
    </>
  )
}

2. mockAPI.js

const availableTimesByDate = {
    '2023-11-29': ['17:00', '18:00', '19:00'],
    '2023-12-01': ['20:00', '21:00', '22:00'],
    '2023-12-02': ['17:00', '18:00', '19:00'],
    '2023-12-03': ['20:00', '21:00', '22:00'],
    '2023-12-04': ['17:00', '18:00', '19:00'],
    '2023-12-05': ['20:00', '21:00', '22:00'],
    '2023-12-06': ['17:00', '18:00', '19:00'],
    '2023-12-07': ['20:00', '21:00', '22:00'],
    '2023-12-08': ['17:00', '18:00', '19:00'],
    '2023-12-09': ['20:00', '21:00', '22:00'],
    '2023-12-10': ['17:00', '18:00', '19:00'],
    '2023-12-11': ['20:00', '21:00', '22:00'],
    '2023-12-12': ['17:00', '18:00', '19:00'],
    '2023-12-13': ['20:00', '21:00', '22:00'],
    '2023-12-14': ['17:00', '18:00', '19:00'],
    '2023-12-15': ['20:00', '21:00', '22:00'],
    '2023-12-16': ['17:00', '18:00', '19:00'],
    '2023-12-17': ['20:00', '21:00', '22:00'],
    '2023-12-18': ['17:00', '18:00', '19:00'],
    '2023-12-19': ['20:00', '21:00', '22:00'],
    '2023-12-20': ['17:00', '18:00', '19:00'],
};

const fetchAPI = (date) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 处理未传日期的情况，返回默认时段
      if (!date) {
        resolve(['17:00', '18:00', '19:00', '20:00', '21:00', '22:00']);
      } else if (availableTimesByDate[date]) {
        resolve(availableTimesByDate[date]);
        console.log('Available Dates:', Object.keys(availableTimesByDate));
      } else {
        reject(new Error('No available times for the selected date.'));
      }
    }, 1000);
  });
};

const submitAPI = (formData) => {
  // 避免修改不存在的日期时段导致报错
  if (availableTimesByDate[formData.date]) {
    availableTimesByDate[formData.date] = availableTimesByDate[formData.date].filter(time => time !== formData.time);
  }

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (formData) {
        resolve(true);
      } else {
        reject(new Error('Form submission failed.'));
      }
    }, 1000);
  });
};

export {fetchAPI, submitAPI};

关键修改说明 #

• 初始化逻辑迁移：把初始数据的异步加载从initializeTimes移到useEffect，确保初始状态同步返回，异步操作在组件挂载后执行。
• Reducer新增case：添加update_times_success处理逻辑，接收新的时段列表并更新state。
• mockAPI容错处理：当fetchAPI未传入date参数时，返回默认时段，避免初始化时触发错误。
• submitAPI优化：增加判断，避免修改不存在的日期时段导致报错。

内容的提问来源于stack exchange，提问作者Viktor Korshunov