React Redux新建订单时reducer残留旧购物车状态问题

旧订单数据残留的核心原因是状态引用没有隔离+状态未重置：

• 调用addItemDetail时直接传入了Context中options对象的引用，Redux里存储的cart项和当前全局Context的options指向同一块内存，后续修改options配置时，已经存入购物车的历史商品项会被同步改动
• 加购完成、离开商品配置页、创建新订单时，没有将Context中的options重置为初始空值，下次进入配置流程会直接复用上次遗留的旧配置
• 部分状态更新、控件绑定存在逻辑bug，会加剧状态错乱问题

1. 抽离options初始值，加购时做引用隔离+状态重置 #

首先在组件外部或Context定义处抽离options的默认初始值，后续所有重置操作都复用这个值：

const INITIAL_OPTIONS = {
  salsa: [],
  toppings: [],
  Comments: "",
  price: 0,
  priceTopping: 0,
  unit_price: 0,
  picture_url: "",
  title: "",
  id: ""
}

修改两个加购跳转的方法，传入拷贝后的独立对象，加购完成立即重置配置：

const BackToProducts = () => {
  if (options.salsa.length) {
    // 深拷贝当前配置，切断和Context中options的引用关联
    dispatch(addItemDetail(structuredClone(options)));
  }
  // 无论是否加购，跳转前都重置配置，避免遗留旧数据
  setOptions(INITIAL_OPTIONS);
  history.push("/productos");
};

const seeCart = () => {
  if (options.salsa.length) {
    dispatch(addItemDetail(structuredClone(options)));
  }
  setOptions(INITIAL_OPTIONS);
  history.push("/carrito");
};

如果需要兼容更低版本浏览器，structuredClone(options)可以替换为JSON.parse(JSON.stringify(options))实现深拷贝。

2. 修复状态更新逻辑bug #

首先去掉handleToppings方法上多余的async关键字（setOptions是同步状态更新，不需要异步包装），将勾选时的直接赋值改为函数式更新，避免闭包旧值导致的状态覆盖：

const handleToppings = (e) => {
  const { name, checked } = e.target;
  if (checked === true) {
    setOptions((prev) => ({
      ...prev,
      toppings: [...prev.toppings, name]
    }));
  }
  if (checked === false) {
    setOptions((prev) => ({
      ...prev,
      toppings: prev.toppings.filter((p) => p !== name),
    }));
  }
};

再修复salsa选择的判断逻辑，原来的限制逻辑写反会导致用户无法正常勾选：

const handleSalsa = (e) => {
  const { name, checked } = e.target;
  // 限制最多选2份salsa，超出时阻止勾选
  if (checked === true && options.salsa.length >= 2) {
    e.preventDefault();
    return;
  }
  if (checked === true) {
    setOptions((prev) => ({
      ...prev,
      salsa: [...prev.salsa, name],
      picture_url: detail.picture_url,
      id: uuidv4(),
      price: detail.price,
      title: detail.title,
    }));
  }
  if (checked === false) {
    setOptions((prev) => ({
      ...prev,
      salsa: prev.salsa.filter((p) => p !== name),
    }));
  }
};

3. 增加卸载重置逻辑，修复多选框绑定错误 #

增加组件卸载时的状态重置，覆盖用户直接返回、不触发加购按钮的场景：

useEffect(() => {
  return () => {
    setOptions(INITIAL_OPTIONS);
  }
}, [setOptions]);

修复多选框的checked绑定错误，原来的options.salsa.index是无效值，会导致控件变成非受控组件，状态不同步：

<InputOptions 
  type="checkbox" 
  checked={options.salsa.includes(p.sauce)} 
  name={p.sauce} 
  value={p.sauce} 
  onChange={handleSalsa} 
/>

4. reducer层增加兜底防护 #

在reducer处理加购逻辑时，再做一次对象拷贝，双重保险避免引用问题：

if (action.type === ADD_ITEM_TO_CART_DETAILS) {
  return {
    ...state,
    cart: [...state.cart, { ...action.payload }]
  }
}

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