Question

稍微说明一下它们，我使用redux更新购物车中的列表，基本上我要做的就是获取列表，添加项目并更新整个列表，当我执行一个动作时，我有一个cartList没有更新。

我见过很多论坛，进行了很多更改，但是当使用快速刷新进行保存（如果已更新）时，仍然无法使其自动更新

这是我在其中列出购物车中物品的组件：

class Cart extends React.Component {

  getTotalPrice = () => {
    //TODO: get total price
    return 'TOTAL: '
  }

  render() {
    const { cartList, navigation } = this.props;
    return (
      <View style={styles.wrap}>
        <SafeAreaView>
          <Text style={styles.title}> Carro de Compras</Text>
        </SafeAreaView>
        <ScrollView style={{ flex: 1 }}>
          <FlatList
            scrollEnabled={false}
            data={cartList}
            numColumns={1}
            renderItem={({ item }) => (
              <CartItem
                navigation={navigation}
                product={item}
              />
            )}
          />
        </ScrollView>
        <View style={styles.navBuy}>
          <Text style={styles.price}>{this.getTotalPrice()}</Text>
          <Text style={styles.buttonBuy}>Comprar</Text>
        </View>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return { cartList: state.cartList }
}

export default connect(mapStateToProps)(Cart);

我在这里有所有动作：

export const setUser = payload => ({
    type: 'SET_USER',
    payload
});

export const setDataMayday = payload => ({
    type: 'SET_DATA_MAYDAY',
    payload
});

export const setDataCartList = payload => ({
    type: 'SET_DATA_CART_LIST',
    payload
});

这里有我的减速器，因为我正在学习使用redux，所以只有一个减速器，我已经看到可以做几个减速器并将它们组合在一起：

const reducer = (state = {}, action) => {

    switch (action.type) {
        case 'SET_USER':
            return { ...state, ...action.payload }
        case 'SET_DATA_CART_LIST':
            return  { ...state, ...action.payload };
        case 'SET_DATA_MAYDAY':
            return  { ...state, form: { ...state.form, ...action.payload } }
        default:
            return state;
    }
}

export default reducer;

这是商店：

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, reducer)
const store = createStore(persistedReducer)
const persistor = persistStore(store)

export { store, persistor };

这是App.js：

export default class App extends Component{
  render() {
    return (
      <Provider store={store}>
        <PersistGate  loading={null} persistor={persistor}>
          <AppNavigator />
        </PersistGate>
      </Provider>
    );
  }
}

更新购物车列表：

const handleAddCart = (props) => {

  let list = props.cartList;

    list.push(props.product);

    props.setDataCartList({
      cartList: list
    });

    Alert.alert("Se añadio el producto al carro de compras");

    Api.addItemToCart(item)
      .then(resp => {
        //TODO: handle response
      })
      .catch(error => {
        console.log(error);
      });;
  }


}

ButtonAddCart = (props) => {
  return (
    <TouchableHighlight
      onPress={() => handleAddCart(props)}>
      <View style={style.cart}>
        <Icon name="shopping-cart" size={20} color={'#E1591E'} />
        <Text> Agregar al carro!</Text>
      </View>
    </TouchableHighlight>
  );
}

const mapDispatchToProps = { setDataCartList };

function mapStateToProps(state) {
  return { cartList: state.cartList }
}

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

Answer 1

您正在改变状态，您不应该通过直接压入数组来改变状态。创建一个新数组并将值推入其中。

const handleAddCart = (props) => {

  // create  a copy of the list
  const list = [...props.cartList];

    list.push(props.product);

    props.setDataCartList({
      cartList: list
    });

    Alert.alert("Se añadio el producto al carro de compras");

    Api.addItemToCart(item)
      .then(resp => {
        //TODO: handle response
      })
      .catch(error => {
        console.log(error);
      });;
  }


}

运行动作时mapStateToProps中的道具不会更新-Redux

1 个答案: