React Native修改quantityCounter状态报错及界面不更新求助

在修改React Native组件中购物车数量状态时遇到两个问题：

1. 第一种实现触发错误：ERROR TypeError: undefined is not an object (evaluating 'state.map')
2. 第二种实现中数量逻辑执行正常，但界面无法同步更新变化

第一种实现代码 #

import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { useSelector } from 'react-redux';
import { selectCartItems } from '../../../../redux/reducer/cartReducer';
import { selectAllItems } from '../../../../redux/reducer/itemReducer';

const CartList = () => {
  const cartItems = useSelector(selectCartItems);
  const itemData = useSelector(selectAllItems);
  
  const [quantityCounter, setQuantityCounter] = React.useState(cartItems);

  function quantityHandler({id, num}){
    const targetItem = itemData.find((item) => item.id === id);
    let targetCart = quantityCounter.find((cart) => cart.id === id);

    setQuantityCounter((previousState) => 
      previousState.forEach(
        (item) => {
          if(item.id === id){
            Object.keys(item).find(key => {
              if(key === 'quantity'){
                if(num === 1 && targetCart.quantity < targetItem.availableItem){
                  item[key] = targetCart.quantity + 1;
                }
                if(num === 0 && targetCart.quantity > 0) {
                  item[key] = targetCart.quantity - 1;
                }
              }
            })
          }
      }));
  }
  return (
    <>
    {quantityCounter.map((item) => (
      <View style={styles.CartItemsContainer} key={item.id}>
        <Text style={styles.textStyle}>{item.productName}</Text>
        <Text style={styles.textStyle}>{item.productPrice}</Text>
        <View style={styles.quantityContainer}>
          <Button title='-' onPress={() => quantityHandler({id : item.id, num: 0})}/>
          <Text style={styles.quantityContainer__text}>{item.itemQuantity}</Text>
          <Button title='+' onPress={() => quantityHandler({id : item.id, num: 1})}/>
        </View>
      </View>
      ))}
    </>
  )
}

const styles = StyleSheet.create({
  CartItemsContainer:{
    flexDirection: 'row', alignSelf: 'stretch'
  },
  textStyle: {
    flex: 1, alignSelf: 'stretch',
    borderWidth: 1, borderTopColor: 'transparent',
    textAlign: 'center', textAlignVertical: 'center'
  },
  quantityContainer:{
    flex: 1, alignSelf: 'stretch', flexDirection: 'row',
    borderWidth: 1, borderTopColor: 'transparent',
    alignItems: 'baseline', justifyContent: 'center'
  },
  quantityContainer__text:{
    marginHorizontal: 5, marginVertical: 5
  }
});
export default CartList;

第二种实现代码 #

import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { useSelector } from 'react-redux';
import { selectCartItems } from '../../../../redux/reducer/cartReducer';
import { selectAllItems } from '../../../../redux/reducer/itemReducer';

const CartList = () => {
  const cartItems = useSelector(selectCartItems);
  const itemData = useSelector(selectAllItems);
  const [quantityCounter, setQuantityCounter] = React.useState(0);
  let total = 0;
  let id, quantity, name, price;
  let cart_replica = [];
  cartItems.forEach(item => {
    id = item.id;
    name = item.productName;
    price = item.productPrice;
    quantity = item.itemQuantity;
    total += item.totalPrice;
    cart_replica.push({id, name, quantity, price})
  });

  function quantityHandler({id, num}){
    const targetItem = itemData.find((item) => item.id === id);
    let targetCart = cart_replica.find((cart) => cart.id === id);
    cart_replica.map(
      (item) => {
        if(item.id === id){
          return { ...cart_replica, item: { ...item, quantity: item.quantity + 1}};
        }
    });
    console.log(cart_replica[0])

  }
  return (
    <>
    {cart_replica.map((item) => (
      <View style={styles.CartItemsContainer} key={item.id}>
        <Text style={styles.textStyle}>{item.name}</Text>
        <Text style={styles.textStyle}>{item.price}</Text>
        <View style={styles.quantityContainer}>
          <Button title='-' onPress={() => quantityHandler({id : item.id, num: 0})}/>
          <Text style={styles.quantityContainer__text}>{item.quantity}</Text>
          <Button title='+' onPress={() => quantityHandler({id : item.id, num: 1})}/>
        </View>
      </View>
      ))}
    </>
  )
}

const styles = StyleSheet.create({
  CartItemsContainer:{
    flexDirection: 'row', alignSelf: 'stretch'
  },
  textStyle: {
    flex: 1, alignSelf: 'stretch',
    borderWidth: 1, borderTopColor: 'transparent',
    textAlign: 'center', textAlignVertical: 'center'
  },
  quantityContainer:{
    flex: 1, alignSelf: 'stretch', flexDirection: 'row',
    borderWidth: 1, borderTopColor: 'transparent',
    alignItems: 'baseline', justifyContent: 'center'
  },
  quantityContainer__text:{
    marginHorizontal: 5, marginVertical: 5
  }
});
export default CartList;

问题分析 #

第一种实现的核心错误 #

1. forEach返回undefined导致状态失效：setQuantityCounter的回调中使用previousState.forEach，而forEach无返回值（返回undefined），执行后quantityCounter变为undefined，后续调用map直接报错。
2. 直接修改原状态对象：代码中直接修改item[key] = ...，属于修改引用类型的原数据，React无法检测到状态变化，即使没有forEach问题，界面也不会更新。
3. 字段名不匹配：渲染时用item.itemQuantity，但修改的是item.quantity，字段不一致导致修改成功也无法显示。

第二种实现的核心错误 #

1. cart_replica不是状态变量：cart_replica是每次渲染重新生成的普通变量，修改它不会触发组件重渲染，界面自然无变化。
2. map操作未生效：cart_replica.map返回了新对象，但未赋值给任何变量，也未调用setQuantityCounter更新状态，修改逻辑等于无效。
3. 状态管理混乱：定义了quantityCounter但完全未使用，状态变量没有起到作用。

正确实现方案 #

import React, { useEffect } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { useSelector } from 'react-redux';
import { selectCartItems } from '../../../../redux/reducer/cartReducer';
import { selectAllItems } from '../../../../redux/reducer/itemReducer';

const CartList = () => {
  const cartItems = useSelector(selectCartItems);
  const itemData = useSelector(selectAllItems);
  // 用Redux数据初始化本地状态，并保持同步
  const [quantityCounter, setQuantityCounter] = React.useState(cartItems);

  // Redux中购物车数据变化时，同步更新本地状态
  useEffect(() => {
    setQuantityCounter(cartItems);
  }, [cartItems]);

  const quantityHandler = ({ id, num }) => {
    const targetItem = itemData.find(item => item.id === id);
    if (!targetItem) return;

    setQuantityCounter(prevState => 
      prevState.map(item => {
        if (item.id !== id) return item;
        // 计算新数量并做边界判断
        let newQuantity = item.itemQuantity;
        if (num === 1 && newQuantity < targetItem.availableItem) {
          newQuantity += 1;
        } else if (num === 0 && newQuantity > 0) {
          newQuantity -= 1;
        }
        // 返回新对象，不修改原数据
        return {
          ...item,
          itemQuantity: newQuantity,
          totalPrice: item.productPrice * newQuantity // 同步更新总价（如果需要）
        };
      })
    );
  };

  return (
    <>
      {quantityCounter.map(item => (
        <View style={styles.CartItemsContainer} key={item.id}>
          <Text style={styles.textStyle}>{item.productName}</Text>
          <Text style={styles.textStyle}>{item.productPrice}</Text>
          <View style={styles.quantityContainer}>
            <Button title='-' onPress={() => quantityHandler({ id: item.id, num: 0 })} />
            <Text style={styles.quantityContainer__text}>{item.itemQuantity}</Text>
            <Button title='+' onPress={() => quantityHandler({ id: item.id, num: 1 })} />
          </View>
        </View>
      ))}
    </>
  );
};

const styles = StyleSheet.create({
  CartItemsContainer:{
    flexDirection: 'row', alignSelf: 'stretch'
  },
  textStyle: {
    flex: 1, alignSelf: 'stretch',
    borderWidth: 1, borderTopColor: 'transparent',
    textAlign: 'center', textAlignVertical: 'center'
  },
  quantityContainer:{
    flex: 1, alignSelf: 'stretch', flexDirection: 'row',
    borderWidth: 1, borderTopColor: 'transparent',
    alignItems: 'baseline', justifyContent: 'center'
  },
  quantityContainer__text:{
    marginHorizontal: 5, marginVertical: 5
  }
});

export default CartList;

修复说明 #

1. 用map替代forEach：map返回新数组，保证setQuantityCounter接收到有效状态值，避免undefined错误。
2. 返回新对象而非修改原数据：通过扩展运算符...item创建新对象，React能检测到状态变化并触发重渲染。
3. 同步Redux与本地状态：使用useEffect监听Redux数据变化，确保本地状态与全局数据一致。
4. 字段名统一：渲染和修改都使用itemQuantity，避免显示错误。
5. 优化边界判断逻辑：直接计算新数量，减少外部依赖，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Almighty Dee