Передача реквизита из RedEx возвращает начальное значение - PullRequest
0 голосов
/ 22 января 2020

Может кто-нибудь помочь мне с этим вопросом. Я использую Redux и Typescript для небольшого проекта. Я передаю избыточное глобальное состояние как реквизит, используя mapStatetoProps в моем компоненте контейнера CartContainer.tsx

import { connect } from "react-redux";
import { fetchOffers } from "../../../api/fetchOffers";
import Cart from "../presentation/Cart";

const mapStateToProps = (state: any) => ({
  items: state.shoppingCartReducer.items,
  discountedOffer: state.shoppingCartReducer.discountedOffer,
  total_cart: state.shoppingCartReducer.total_cart
});
const mapDispatchToProps = (dispatch: any) => ({
  getOffers: (items: any[]) => fetchOffers(items),
});

export default connect(mapStateToProps, mapDispatchToProps)(Cart);

Это мой презентационный компонент Cart.tsx , в котором я console.log реквизиты для распечатки значений нужных мне свойств, я импортирую реквизиты так:

import React, { useEffect, useLayoutEffect, Fragment, useCallback } from "react";
import { ShoppingCart } from '../../organismes/ShoppingCart'
import { CommercialOffer } from "../../../models/Offer";

export interface ICartProps {
  items: any[]; 
  total_cart: number, 
  discountedOffer: CommercialOffer, 
  getOffers: (items: any[]) => void;
}
const Cart = (props: ICartProps) => {
  const { items, total_cart, getOffers } = props;
  const loadOffers = useCallback(() => getOffers(items), [items, getOffers]);
  useLayoutEffect(() => {
    console.log(props)
    loadOffers()
  }, [loadOffers, items, total_cart]);

  return (
    <Fragment>
      <ShoppingCart {...props}/>
    </Fragment>
  );
};
export default Cart;

Я использую инструменты реагирования, чтобы проверить, какие реквизиты доступны. 2 реквизита, которые мне нужны, discountsOffer и total_cart находятся здесь со значением:

enter image description here

Однако, значения никогда не доступны, как показано на скриншоте ниже. То же самое для фронта, я никогда не могу ссылаться на реквизит.

enter image description here

...