Console.log gibt „undefiniert“ zurück, wenn versucht wird, den Status mit abgerufenen Daten zu aktualisieren

Question

Wenn ich die Daten beim Rendern erhalte oder wenn sich einige Abhängigkeiten ändern, wird der Redux-Store korrekt aktualisiert, aber wenn ich console.log verwende, wird „undefiniert“ angezeigt.

Ich entwickle ein Buchungssystem und möchte die Anzahl der gebuchten Stunden an einem bestimmten Datum erhalten

/// 在组件渲染时获取数据并尝试使用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的值。