开发预约系统时更新状态后console.log输出undefined问题求助

核心问题1：Reducer状态结构不一致 #

你的hoursReducer默认状态是一个包含bookedHrs字段的对象，但在SET_BOOKED_HRS动作里直接返回了数组[...action.data]，这会把整个状态从对象改成数组。后续组件里如果还是通过state.bookedHrs获取数据，自然会得到undefined——因为此时state本身就是数组，根本没有bookedHrs属性。

修复Reducer：

const hoursReducerDefaultState: {
  bookedHrs: string[];
} = {
  bookedHrs: [],
};

export const hoursReducer = (
  state = hoursReducerDefaultState,
  action: {
    type: string;
    data: string[];
  }
) => {
  switch (action.type) {
    case 'SET_BOOKED_HRS':
      // 保持状态结构为对象，只更新bookedHrs字段
      return { ...state, bookedHrs: [...action.data] };
    default:
      return state;
  }
};

核心问题2：异步状态更新的即时打印问题 #

setBookedHrs是异步更新状态的，你在第二个then里直接打印bookedHrs，此时状态还没完成更新，拿到的是更新前的旧值（初始的空数组或者之前的值），如果初始没正确初始化的话就会是undefined。

如果需要在状态更新后打印，改用监听状态的useEffect：

// 单独加一个useEffect监听bookedHrs变化
useEffect(() => {
  console.log(bookedHrs);
}, [bookedHrs]);

// 原请求的useEffect保留，去掉里面的console.log
useEffect(() => {
  axios
    .get(
      `http://localhost/healthboyz/index.php/booked/${
        formData.doctor_id
      }/${moment(formData.date).format('YYYY-MM-DD')}`
    )
    .then((res) => setBookedHrs(res.data))
    .catch((e) => console.log(e));
}, [formData.doctor_id, formData.date]);

额外检查点 #

• 确认setBookedHrs这个action creator确实正确分发了SET_BOOKED_HRS动作，并且传递的data是正确的字符串数组。
• 组件里获取Redux状态时，路径要和状态结构匹配，比如通过useSelector(state => state.hours.bookedHrs)（假设reducer挂载在hours键下）。

内容的提问来源于stack exchange，提问作者Antoni Łubisz