当我更新 Redux 时，React Native componentWillReceiveProps 没有正确调用

Question

好的，这是我在 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
    };
  };

还有 CartScreen componentWillReceiveProps 我想在其中呈现购物车中的产品。 redux 运行良好，我已正确存储所有数据，但它们不呈现！

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 [],
}

这很奇怪，因为在第二次按下删除时，购物车道具是相同的...但是当我添加并且道具更改时没有显示任何内容。

谢谢！

Answer 1

我认为您没有正确更新您的商店。

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

在 cartReducer.js 中更新此内容。您应该记住使用传播运算符，否则每次更新商店时状态都会相同，这将导致 componentWillReceiveProps 无法按预期工作。希望对您有所帮助！！.. 编码愉快！！

当我更新 Redux 时，React Native componentWillReceiveProps 没有正确调用

React Native componentWillReceiveProps doesn't call right when I update Redux

reactjs

react-native

redux

react-redux

componentwillreceiveprops