Инвариант не сработал: Была обнаружена мутация состояния между отправками, в пути 'cart.itemsPrice'. Это может привести к некорректному поведению

У меня есть страница размещения заказа, и я не могу перейти к размещению заказа из-за этой ошибки. Я не вижу, где именно происходит изменение состояния, я думаю, что это потому, что переменные динамические, но это все равно не имеет смысла для меня.

Вот моя страница:

Мое действие:

import axios from "axios";
import {
  ORDER_CREATE_REQUEST,
  ORDER_CREATE_SUCCESS,
  ORDER_CREATE_FAIL,
  ORDER_CREATE_RESET,
} from "../constants/orderConstants";

export const createOrder = (order) => async (dispatch, getState) => {
  try {
    dispatch({
      type: ORDER_CREATE_REQUEST,
    });

    const {
      userLogin: { userInfo },
    } = getState();
    const config = {
      headers: {
        "Content-type": "application/json",
        Authorization: `Bearer ${userInfo.access}`,
      },
    };
    const { data } = await axios.post(`/api/orders/add/`, order, config);
    dispatch({
      type: ORDER_CREATE_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: ORDER_CREATE_FAIL,
      payload:
        error.response && error.response.data.detail
          ? error.response.data.detail
          : error.message,
    });
  }
};

Ошибка возникает на строке 56. Я подумал, что это может быть как-то связано с переменной itemsPrice, поэтому я закомментировал ее, но это все переменные, которые выдают ошибку. Я попробовал запустить функцию createOrder до диспетчеризации и после нее, но все равно возникла та же ошибка. Я прочитал на этой странице об ошибке, но ничего не понял.

Я не уверен, почему это происходит, учитывая тот факт, что все переменные, которые я использую, полностью в порядке и видны на странице. Действие даже не запускается, когда должно, из-за этой ошибки.

РЕДАКТИРОВАТЬ: Это мой редуктор заказов:

import {
  ORDER_CREATE_REQUEST,
  ORDER_CREATE_SUCCESS,
  ORDER_CREATE_FAIL,
  ORDER_CREATE_RESET,
} from "../constants/orderConstants";

export const orderCreateReducer = (state = {}, action) => {
  switch (action.type) {
    case ORDER_CREATE_REQUEST:
      return {
        loading: true,
      };

    case ORDER_CREATE_SUCCESS:
      return {
        loading: false,
        success: true,
        order: action.payload,
      };

    case ORDER_CREATE_FAIL:
      return {
        loading: false,
        error: action.payload,
      };

    case ORDER_CREATE_RESET:
      return {};

    default:
      return state;
  }
};

После некоторого разговора в комментариях нам понадобилось больше контекста, поэтому мы создали git и открыли pull request с потенциальным решением.

См. github Pull request: https://github.com/StHeisenberg/ProjectRepo/pull/1

Вернуться на верх