React JS：更新数组对象后旧项为何会重置？

你的问题核心在于prices数组每次组件渲染都会被重新初始化：

• 这段初始化prices的代码写在组件的渲染逻辑里（比如函数组件的顶层），每次组件触发重渲染（比如点击按钮后状态变化），都会重新执行props.cartItems.slice(1).map(...)，从原始的cartItems数据重新生成prices数组，之前修改过的price值自然会被覆盖回初始值。
• 另外你直接修改prices数组元素的方式，也不符合React的状态更新机制，不过这里最关键的是数组被反复重置。

1. 用状态管理prices数组 #

把prices改成组件的状态，确保初始化只执行一次（或在cartItems变化时才更新初始值）：

import { useState, useEffect } from 'react';

// 在组件内部
const [prices, setPrices] = useState([]);

// 初始化prices，仅在cartItems变化时重新生成
useEffect(() => {
  const newPrices = props.cartItems.slice(1).map(data => ({
    id: data.id,
    price: parseInt(data.price)
  }));
  setPrices(newPrices);
}, [props.cartItems]); // 依赖cartItems，只有它变化时才重新初始化

2. 正确更新价格状态 #

更新价格时要遵循不可变更新原则，不能直接修改原数组元素，而是生成新的数组来触发状态更新：

const calculateTotalPrice = () => {
  setPrices(prevPrices => {
    return prevPrices.map(item => {
      if (item.id === info.id) {
        // 返回新的对象，不修改原对象
        return { ...item, price: info.price * found.quantity };
      }
      return item;
    });
  });
};

这样修改后，prices数组会被React状态管理追踪，每次更新都会生成新的数组，不会被重复初始化，之前修改的价格也不会被重置。

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