Console.log mengembalikan 'tidak ditentukan' apabila cuba mengemas kini status dengan data yang diambil

Question

Apabila saya mendapat data pada pemaparan atau apabila beberapa kebergantungan berubah, ia mengemas kini ke kedai Redux dengan betul, tetapi apabila saya console.log ia berkata 'tidak ditentukan'.

Saya sedang membangunkan sistem tempahan dan ingin mendapatkan bilangan jam tempahan pada tarikh yang ditetapkan

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

Soalan di sini sebenarnya ada kaitan dengan cara keadaan ditetapkan dalam Redux:

Andaikan hoursReducer负责整个hoursReducerDefaultState, kodnya adalah seperti berikut:

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

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

Kemudian anda perlu menyediakan keadaan Redux untuk mengemas kini keadaan yang ingin anda kemas kini:

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;
  }
};

Nota: Saya juga mengandaikan anda mahu menggantikan sepenuhnya nilai bookedHrs.