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从我的redux存储中获取的。

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，该getUserCredit()是从redux存储中提取的（据推测是由this.props.mealPrice更新的）。

问题是：第一次点击的用餐卡在this.props.mealPrice上什么也不显示，而当其他卡片被单击并模态安装时，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
  }
}

data[str(message.author)]['win'] = data[str(message.author)].get('win') + 1

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获取的状态信息与处理结果一样）。如果发生错误，您也可以显示该错误。

组件不显示更新的Redux状态

1 个答案: