當嘗試使用取得的資料更新狀態時，Console.log傳回'undefined'

Question

當我在渲染時或某些依賴項改變時獲取資料時，它會正確地更新到Redux store中，但是當我使用console.log時，它會顯示'undeifined'。

我正在開發預訂系統，希望在指定的日期上獲取已預訂的小時數

/// 在组件渲染时获取数据并尝试使用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))
      .then(() => console.log(bookedHrs))
      .catch((e) => console.log(e));}, 
    [formData.doctor_id, formData.date]);

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

export const hoursReducer = (
  state = hoursReducerDefaultState,
  action: {
    type: string;
    data: string[];
  }
) => {
  switch (action.type) {
    case 'SET_BOOKED_HRS':
      return [...action.data];
    default:
      return state;
  }
};

Answer 1

這裡的問題其實與Redux中如何設定狀態有關：

假設hoursReducer負責整個hoursReducerDefaultState#，其程式碼如下：

type HoursReducer = {
  bookedHrs: string[];
};

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

然後，您需要設定Redux狀態以更新您要更新的狀態：

export const hoursReducer = (
  state = hoursReducerDefaultState,
  action: {
    type: string;
    data: string[];
  }
) => {
  switch (action.type) {
    case 'SET_BOOKED_HRS':
      // 使用“spread”操作符包括先前的状态
      return {
        ...state,
        bookedHrs: action.data
      }
    default:
      return state;
  }
};

注意：我還假設您想完全替換bookedHrs的值。