React-Redux只有lastet更改狀態才能正確顯示-有解無憂

我需要來自不同組件的一些狀態但是 atm 只有在我 console.log 正確顯示時才顯示更改的最新狀態 3 出 4 未定義。

我的 Action 和 Reduxer

export const paypal_error =
  (time, timevalidation, acceptBox, sliderDeliveryValue) => (dispatch) => {
    dispatch({
      type: 'PAYPAL_ERROR',
      payload: {
        time,
        timevalidation,
        acceptBox,
        sliderDeliveryValue,
      },
    });
  };


export const paypalReducer = (state = {}, action) => {
  switch (action.type) {
    case 'PAYPAL_ERROR':
      return {
        ...state,
        time: action.payload.time,
        timevalidation: action.payload.timevalidation,
        acceptBox: action.payload.acceptBox,
        sliderDeliveryValue: action.payload.sliderDeliveryValue,
      };
    default:
      return state;
  }
};

我的調度，每個都在不同的組件中

dispatch(paypal_error({ time: date }))
dispatch(paypal_error({ sliderDeliveryValue: event.target.value }));
dispatch(paypal_error({ timeValidation: false }));
dispatch(paypal_error({ acceptBox: !acceptBox }));

uj5u.com熱心網友回復：

您正在發送部分狀態更新，但假設在 reducer 函式中進行了完整更新。您將需要一些邏輯來處理部分更新，這樣您就不會覆寫操作負載中未定義的現有狀態。您可以簡單地為您可能正在更新的每個狀態值屬性提供當前現有狀態值屬性的后備值。

例子：

export const paypalReducer = (state = {}, action) => {
  switch (action.type) {
    case 'PAYPAL_ERROR':
      return {
        ...state,
        time: action.payload.time ?? state.time,
        timevalidation: action.payload.timevalidation ?? state.timevalidation,
        acceptBox: action.payload.acceptBox ?? state.acceptbox,
        sliderDeliveryValue:
          action.payload.sliderDeliveryValue ?? state.sliderDeliveryValue,
      };

    default:
      return state;
  }
};

此外，paypal_error動作創建者最多需要 4 個引數：

paypal_error = (time, timevalidation, acceptBox, sliderDeliveryValue) => ...

要么傳遞四個引數：

dispatch(paypal_error(date));
dispatch(paypal_error(undefined, undefined, undefined, event.target.value));
dispatch(paypal_error(undefined, false));
dispatch(paypal_error(undefined, undefined, !acceptBox));

或者更新動作創建者以采用單個物件引數：

paypal_error = ({
  time,
  timevalidation,
  acceptBox,
  sliderDeliveryValue
}) => ...

由于paypal_error動作創建者似乎也不是一個異步動作，它不需要回傳一個呼叫的函式dispatch，它可以簡單地回傳帶有計算payload屬性的動作物件。

export const paypal_error = ({
  acceptBox,
  sliderDeliveryValue
  time,
  timevalidation,
}) => ({
  type: 'PAYPAL_ERROR',
  payload: {
    acceptBox,
    sliderDeliveryValue
    time,
    timevalidation,
  },
});

uj5u.com熱心網友回復：

你必須傳播state變數

return {
    ...state,
    time: action.payload.time,
    timevalidation: action.payload.timevalidation,
    acceptBox: action.payload.acceptBox,
    sliderDeliveryValue: action.payload.sliderDeliveryValue,
};

編輯1：正如gunwin所說，初始狀態必須是{}

編輯2：

如果您不使用paypal_error函式，則不應將其作為引數dispatch

export const paypal_error =
  (time, timevalidation, acceptBox, sliderDeliveryValue) => ({
    type: 'PAYPAL_ERROR',
    payload: {
      time,
      timevalidation,
      acceptBox,
      sliderDeliveryValue
    }
  });

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/526257.html

標籤：javascript反应还原反应还原

上一篇：React三元運算子如何呼叫2個函式？

下一篇：如何從API回應URL獲取引數？