組件不顯示更新的Redux狀態

Question

我有一個包含餐卡的“餐”頁面，單擊該卡后，該模式會切換一個模式，其中包含有關所餐的詳細信息：

{
  this.props.filteredMeals.map(m => {
    return (
      <div onClick={() => this.props.toggleMealModal(m)} key={m.id}>
        <MealCard meal={m} />
      </div>
    )
  })
}

toggleMealModal(meal)更新我的redux商店中的餐點。

meal: {
  description: "Marre des sashimis de thon ou de saumon ? Tentez le maquereau!",
  fees: "80",
  id: 27,
  ingredients: "maquereau cru",
  name: "Sashimi de maquereau",
  no_fees_price: 599,
  original_price: 850,
}

在我的MealModal內部，我有一個PaymentContainer子組件，該組件在模式切換並調用動作時也會掛載：

componentDidMount() {
    this.props.getUserCredit(this.props.meal.no_fees_price, this.props.meal.fees);
  } 

其中this.props.meal是通過我的終極版商店獲取mapStateToProps 。

getUserCredit()是以下操作：

export const getUserCredit = (noFeesPrice, fees) => {
  return dispatch => {
    axios.get('/get_user_credit')
    .then(res => {
      dispatch(setUserCredit(parseInt(res.data.credit) / 100));
      parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit) < 0 ?
        dispatch(setMealPrice(0, (parseInt(noFeesPrice) + parseInt(fees)) / 100))
        :
        dispatch(setMealPrice((parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit)) / 100, parseInt(res.data.credit) / 100)
          );
    })
    .catch(err => console.log(err));
  }
}

然后一個子組件顯示mealPrice ，從了Redux店取出（並通過所謂更新getUserCredit()

問題是：第一次單擊的餐卡在this.props.mealPrice什么也不顯示，而當單擊其他卡並進行模態安裝時， this.props.mealPrice顯示以前單擊的餐卡的價格。

如何更改我的代碼，以使正確的價格與正確的餐食相吻合？

編輯：相關的reducers和動作創建者代碼：

export const setUserCredit = (credit = 0) => ({
  type: SET_USER_CREDIT,
  payload: { credit }
});

export const setMealPrice = (mealPrice = null, amountOff = 0) => ({
  type: SET_MEAL_PRICE,
  payload: { mealPrice, amountOff }
});

---

case SET_USER_CREDIT: {
  return {
    ...state,
    credit: action.payload.credit
  }
}
case SET_MEAL_PRICE: {
  return {
    ...state,
    amountOff: action.payload.amountOff,
    mealPrice: action.payload.mealPrice
  }
}

Answer 1

我建議您在使用API​​時使用狀態指示器。

非常簡化，您可以構建一些動作創建者，例如：

const getUserCreditStart = () => ({
  type: GET_USER_CREDIT_START,
});

const getUserCreditSuccess = () => ({
  type: GET_USER_CREDIT_SUCCESS,
});

const getUserCreditError = payload => ({
  type: GET_USER_CREDIT_ERROR,
  payload,
});

然后，您可以在getUserCredit函數中分派以下操作：

export const getUserCredit = (noFeesPrice, fees) => (dispatch) => {
    dispatch(getUserCreditsStart());
    return axios.get('/get_user_credit')
      .then(res => {
        dispatch(setUserCredit(parseInt(res.data.credit) / 100));
        parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit) < 0
        ? dispatch(setMealPrice(0, (parseInt(noFeesPrice) + parseInt(fees)) / 100))
        : dispatch(setMealPrice((parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit)) / 100, parseInt(res.data.credit) / 100));
    })
    .then(() => dispatch(getUserCreditSuccess()))
    .catch(err => dispatch(getUserCreditError(err)))
}

然后，您需要將它們添加到減速器中。 順便說一句。 在這里typeToReducer可能是一個不錯的選擇。 :)

在減速器中，您需要為已調度的不同操作設置狀態。

const initialState = {
  status: 'INITIAL',
};

...

case GET_USER_CREDIT_START: {
  return {
    ...state,
    status: 'START',
  }
}

case GET_USER_CREDIT_SUCCESS: {
  return {
    ...state,
    status: 'SUCCESS',
  }
}

case GET_USER_CREDIT_ERROR: {
  return {
    ...state,
    status: 'ERROR',
    error: action.payload,
  }
}

好了，然后在您的PaymentContainer組件中，您可以等待答案並在等待時顯示加載欄（通過mapStateToProps獲取的狀態信息與處理結果一樣）。 如果發生錯誤，您也可以顯示該錯誤。