Mobx状态未更新问题：React模态框选择不同属性无法添加至购物车数组

看起来你遇到的核心问题是提交购物车时参数被提前重置，导致不管选择什么尺寸，最终提交的都是默认的small规格，进而购物车的存在性检查认为商品已存在，无法添加新的不同尺寸披萨。让我们一步步拆解问题并修复：

核心问题根源 #

你的模态框按钮同时绑定了onClick和表单的onSubmit事件，事件执行顺序是：

1. 点击按钮 → 触发button.onClick，立刻把selectedOption重置为small
2. 触发form.onSubmit，此时获取的modalSize、modalPrice已经是small规格的值
3. 购物车检查时，自然会认为该规格商品已存在（如果之前添加过），无法加入新对象

修复步骤 #

1. 重构表单提交逻辑，避免提前重置选项 #

把按钮的onClick和表单提交逻辑合并，确保先获取当前选中的规格参数，再执行重置和关闭模态框的操作。修改ModalWindowComponent中的表单部分：

// 替换原有的form代码
<form className="modal-content-sizes-form">
  <label>
    <input 
      name="radio-size"
      value="small" 
      type="radio" 
      onChange={handleSetOption} 
      checked={selectedOption === "small"} 
      className="modal-content-sizes-form-option"
    />Маленькая</label>
  <label>
    <input 
      name="radio-size"
      value="medium" 
      type="radio" 
      onChange={handleSetOption}
      checked={selectedOption === "medium"}
      className="modal-content-sizes-form-option"
    />Средняя</label>
  <label>
    <input 
      name="radio-size"
      value="big" 
      type="radio" 
      onChange={handleSetOption}
      checked={selectedOption === "big"} 
      className="modal-content-sizes-form-option"
    />Большая</label>
  
  {/* 修改按钮为type="button"，手动处理提交逻辑 */}
  <button 
    type="button"
    onClick={action(() => {
      // 1. 获取当前选中规格的参数
      const currentSize = pizzaStore.setSize(selectedOption);
      const currentPrice = pizzaStore.setPrice(selectedOption, pizzaStore.modalProps.price);
      const submitData = {
        modalName,
        modalDesc,
        modalSize: currentSize,
        modalPrice: currentPrice,
        modalImageUrl
      };

      // 2. 提交到购物车
      cartStore.handleSubmitProps(submitData);

      // 3. 重置选项并关闭模态框
      setSelectedOption("small");
      setActiveModal(false);
      console.log(cartStore.cartItems);
    })}
  >Добавить</button>
</form>

2. 移除不必要的checked判断 #

原代码中checked={!activeModal||selectedOption==="small"}会导致模态框关闭时强制选中small选项，这会干扰状态同步，改成直接判断selectedOption即可，如上面代码所示。

3. 优化购物车Store的存在性检查逻辑 #

你的CartStore.handleSubmitProps中的判断逻辑是正确的，但可以优化一下可读性：

handleSubmitProps=(p:any)=>{
  // 用更清晰的变量名
  const isItemExists = this.cartItems.some(item => 
    item.modalName === p.modalName && item.modalSize === p.modalSize
  );

  if(isItemExists){
    console.log(`商品 ${p.modalName} (尺寸 ${p.modalSize}cm) 已在购物车中`);
  } else{
    console.log(`添加商品: ${p.modalName} (尺寸 ${p.modalSize}cm)`);
    this.cartItems.push(p);
    // 可以在这里同步更新购物车总价
    this.cartPrice += p.modalPrice;
  }
}

4. 确保Mobx状态追踪正常 #

因为你已经用了makeAutoObservable，数组的push操作会被Mobx自动追踪，只要组件是observer包裹的，状态变化会自动触发重渲染。如果需要在其他组件展示购物车内容，记得用observer包裹对应组件。

测试验证 #

修改完成后，尝试选择不同尺寸的披萨添加到购物车：

1. 选择medium尺寸，点击添加 → 购物车应新增medium规格的披萨
2. 再次选择small尺寸，点击添加 → 购物车应新增small规格的披萨
3. 重复添加同一尺寸的披萨 → 控制台应提示商品已存在

这样就能解决你遇到的“无法添加不同规格商品”的问题了。

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