React Native componentWillReceiveProps не работает правильно при обновлении Redux - PullRequest
Новая
       78

React Native componentWillReceiveProps не работает правильно при обновлении Redux

0 голосов
/ 26 марта 2020

Хорошо, вот мои кнопки, где я добавляю и удаляю из корзины в ProductScreen : 

    <TouchableOpacity onPress={()=>{this.addToCart()}}>
                   <Text>add to cart</Text>
    </TouchableOpacity>

   <TouchableOpacity onPress={()=>{this.props.updateCart({'numberOfProducts':0,'products':[]})}}>
                   <Text>Erase cart</Text>
    <TouchableOpacity>

Функция addToCart : 

addToCart = () =>{
    let currentCartProducts = this.props.cart;
    currentCartProducts.numberOfProducts++;
    this.setState({
        currentProductToAdd:Object.assign(
            this.state.currentProductToAdd,
                {
                    'toalPriceOfProductWithExtras': this.props.navigation.getParam('price') * this.state.value,
                    'piecesOfProduct': this.state.value,
                }
        )
    })
    currentCartProducts.products.push(this.state.currentProductToAdd);
    this.props.updateCart(currentCartProducts);
}

CartReducer 

const INITIAL_STATE = {'numberOfProducts':0,'products':[]};

export default (state = INITIAL_STATE, action) => {
  switch(action.type) {
    case 'update':
      return action.payload;
    default: 
     return state;
  }
};

CartAction 

export const updateCart = (val) => {
    return{
      type: 'update',
      payload: val
    };
  };

И компонент CartScreenWillReceiveProps , где я хочу отобразить продукты, которые находятся в корзине. Редукс работает хорошо, и у меня все данные хранятся правильно, но они не отображаются! 

componentWillReceiveProps(nextProps) {
    console.log('I m in componentWillReceiveProps')
    if (this.props.cart !== nextProps.cart) {
        console.log('OLD CART')
        console.log(this.props.cart)
        console.log('NEW CART')
        console.log(nextProps.cart)
    }
}

Когда я нажимаю добавить, это не работает, но когда я нажимаю удалить, это работает!

После одного добавления и одного удаления: 

I m in componentWillReceiveProps
OLD CART
Object {
  "numberOfProducts": 1,
  "products": Array [
    Object {
      "extras": undefined,
      "piecesOfProduct": 1,
      "productName": "Chips",
      "productPrice": 0,
      "restaurantAddres": "Tay House 300 Bath St",
      "restaurantName": "time2dine - Spaces",
      "toalPriceOfProductWithExtras": 0,
    },
  ],
}
NEW CART
Object {
  "numberOfProducts": 0,
  "products": Array [],
}

После другого удаления нажмите: 

I m in componentWillReceiveProps
OLD CART
Object {
  "numberOfProducts": 0,
  "products": Array [],
}
NEW CART
Object {
  "numberOfProducts": 0,
  "products": Array [],
}

Это странно потому что при втором нажатии на кнопку удаления корзины те же реквизиты ... но когда я добавляю и изменение реквизита ничего не показывает.

Спасибо!

1 Ответ

0 голосов
/ 26 марта 2020

Я думаю, вы не обновляете свой магазин должным образом. 

case 'update':`
 return {...state, ...action.payload};

Обновите это в cartReducer.js. Не забывайте использовать оператор распространения, в противном случае состояние будет одинаковым при каждом обновлении хранилища, что приведет к тому, что componentWillReceiveProps не будет работать должным образом. Надеюсь, это поможет !! .. Счастливое кодирование !!

...