Reactjs React本机redux状态数组更新导致未定义错误

我正在构建一个RN应用程序，我最近刚刚学习了REDUX并将其应用到我的应用程序中。我的手机应用程序中有购物车功能。在一个屏幕上，用户可以向购物车添加项目。完成后，他们可以单击购物车图标查看整个购物车（新屏幕）

下面显示的是“我的购物车”屏幕的代码

import React, { useState, useEffect } from "react";
import { StyleSheet, SafeAreaView } from "react-native";
import {
  Icon,
  Layout,
  Text,
  TopNavigation,
  TopNavigationAction,
  Divider,
  List,
  ListItem,
  Button,
  useTheme,
} from "@ui-kitten/components";
import * as AppConstants from "../constants/constants";
import { useDispatch, useSelector } from "react-redux";
import { cartItemRemoved } from "../store/shoppingCart";

const CartScreen = ({ navigation }) => {
  const theme = useTheme();
  const dispatch = useDispatch();
  const cartData = useSelector((state) => state.shoppingCart.cart);

  const BackIcon = (props) => <Icon {...props} name="arrow-back" />;
  const TrashIcon = (props) => <Icon {...props} name="trash-2" />;

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={() => navigation.goBack()} />
  );

  useEffect(() => {}, []);

  const renderItemAccessory = (item) => {
    return (
      <Button
        status="danger"
        accessoryLeft={TrashIcon}
        size="tiny"
        onPress={() => {
          alert("You selected: " + item.serviceName + item.serviceId);
          dispatch(cartItemRemoved(item.serviceId));
        }}
      >
        Delete
      </Button>
    );
  };

  const renderItem = ({ item }) => (
    <ListItem
      title={`${item.serviceName}`}
      description={`${item.price}`}
      accessoryRight={() => renderItemAccessory(item)}
    />
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation
        title={AppConstants.TITLE_Cart}
        subtitle={AppConstants.APP_SLOGAN}
        alignment="center"
        accessoryLeft={() => BackAction()}
      />
      <Divider />
      <Layout style={styles.container}>
        {cartData.length > 0 ? (
          <>
            <List
              data={cartData}
              ItemSeparatorComponent={Divider}
              renderItem={renderItem}
            />
            <Button onPress={() => {}}>Send</Button>
          </>
        ) : (
          <Text style={styles.text} category="h1">
            Cart is empty.
          </Text>
        )}
      </Layout>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    maxHeight: 300,
  },
  text: {
    textAlign: "center",
    padding: 10,
  },
});

export default CartScreen;

再往下看，我也收到了这个错误消息

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError

以下是我的REDUX reducer中的代码

//================================================
// Action types
//================================================
const CART_ITEM_ADDED = "cartItemAdded";
const CART_ITEM_REMOVED = "cartItemRemoved";

//================================================
// Actions - This is also known as action creators
//================================================
export const cartItemAdded = (
  serviceId,
  quantity,
  description,
  serviceName,
  price
) => ({
  type: CART_ITEM_ADDED,
  payload: {
    serviceId,
    quantity,
    description,
    serviceName,
    price,
  },
});

export const cartItemRemoved = (serviceId) => ({
  type: CART_ITEM_REMOVED,
  payload: {
    serviceId,
  },
});

//================================================
// Reducer
//================================================

const initialState = {
  cart: [],
};

export default function shoppingCartReducer(state = initialState, action) {
  switch (action.type) {
    case CART_ITEM_ADDED:
      return {
        ...state,
        cart: [...state.cart, action.payload],
      };

    case CART_ITEM_REMOVED:
      return state.cart.filter(
        (service) => service.serviceId !== action.payload.serviceId
      );

    default:
      return state;
  }
}

---

如果有人能帮我理解我在这里遗漏了什么？

问题来自你们的减速器

case CART_ITEM_REMOVED:
      return state.cart.filter(
        (service) => service.serviceId !== action.payload.serviceId
      );

您已经更改了所有状态，它必须是

case CART_ITEM_REMOVED:
      return {
       ...state,
       cart: state.cart.filter((service) => service.serviceId !== action.payload.serviceId)
       };

---

非常感谢你！这解决了我的问题！

case CART_ITEM_REMOVED:
      return {
       ...state,
       cart: state.cart.filter((service) => service.serviceId !== action.payload.serviceId)
       };