Mobx 状态不更新

Question

I have 2 mobx stores, product one and cart one, also I have a modal window React component. What I need to do is to put properties into the modal window with product store method and then push all the properties in a form of an Object into an array in cart store. The problem is that I check if an object already exists in the array, but even if you pick different properties, in the end, the state stays the same and the array does not let objects enter. States like size and price do not change at all.

Here are the code pieces:

Product store:

import axios from "axios";
import {makeAutoObservable} from "mobx";
class PizzaStore {
    weight:number=200;
    size:number=20;
    pizzas:Object[]=[];
    modalProps:any={};
    constructor(){
        makeAutoObservable(this);
    }
    setModalProps=(p:Object)=>{this.modalProps=p};
    setPizzas=(pizzaArr:any)=>{
        this.pizzas=pizzaArr}
    fetchPizzas=()=>{
        axios.get("http://localhost:3000/db.json").then((resp)=>{
    this.setPizzas(resp.data.pizzas);})}
    setWeight=(option:string)=>{
        switch (option){
            case "small":return this.weight;
            case "medium":return this.weight*1.5;
            default:return this.weight*2;
        }
    }
    setSize=(opt:string)=>{
        switch (opt){
            case "small":return this.size
            
            case "medium":return this.size*1.5;
           
            default:return this.size*2;
        }
    }
    setPrice=(opt:string, price:number)=>{
        switch (opt){
            case "small":return price;
            case "medium":return price*1.5;
            default:return price*2;
        }
    }}
const pizzaStore=new PizzaStore();

export default pizzaStore;
        

Cart Store:

import { makeAutoObservable } from "mobx";
interface p{
    p:object,
}
class CartStore{
    cartItems:any=[]
    cartPrice:number=0;
    constructor(){
        makeAutoObservable(this);
    }
    handleSubmitForm=(e:any, p:{})=>{
        e.preventDefault();
        this.handleSubmitProps(p);
    }
    handleSubmitProps=(p:any)=>{
        if(this.cartItems.some((item:any)=>{return item.modalName===p.modalName&&item.modalSize===p.modalSize})){
            console.log(p.modalName, p.modalSize, p.modalPrice)
        }
           
            else{
                console.log("pushed")
                this.cartItems.push(p);
                console.log(p.modalPrice)
            }
            
        }
        
        
   }
    

const cartStore=new CartStore();
export default cartStore;

And the modal window component:

import React from 'react'
import pizzaStore from './stores/PizzaStore'
import {observer} from "mobx-react-lite"
import cartStore from './stores/CartStore';
import { action } from 'mobx';

function ModalWindowComponent({activeModal, setActiveModal}:any){
    
    const [selectedOption, setSelectedOption]=React.useState("small")
    const handleSetOption=(e:any)=>{
            setSelectedOption(e.target.value)
        }
        let modalImageUrl=pizzaStore.modalProps.imageUrl
        let modalName=pizzaStore.modalProps.name
        let modalDesc=pizzaStore.modalProps.description
        let modalSize=pizzaStore.setSize(selectedOption)
        let modalPrice=pizzaStore.setPrice(selectedOption, pizzaStore.modalProps.price)

    return (
        <div className={activeModal?"modal active":"modal"}  onClick={()=>{setActiveModal(false); setSelectedOption("small")}}>
            <div className="modal-content" onClick={(e)=>{e.stopPropagation()}}>
                <div className="modal-content-header">
                    <button onClick={()=>setActiveModal(false)}>Close</button>
                </div>
                <img src={modalImageUrl} className="modal-content-img"/>
                <p className="modal-content-pizza-name">{modalName}</p>
                <p className="modal-content-pizza-desc">{modalDesc}</p>
                <p className="modal-content-pizza-size">{pizzaStore.setSize(selectedOption)}см</p>
                <p className="modal-content-pizza-weight">{pizzaStore.setWeight(selectedOption)}грамм</p>
                <p className="modal-content-pizza-price">{modalPrice}Руб.</p>
                <form className="modal-content-sizes-form" onSubmit={action((e)=>cartStore.handleSubmitForm(e, {modalName, modalDesc, modalSize, modalPrice, modalImageUrl}))}>
                    <label>
                    
                    <input  name="radio-size"value="small" type="radio" onChange={handleSetOption} checked={!activeModal||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>
                    <button onClick={()=>{setSelectedOption("small");setActiveModal(false);console.log(cartStore.cartItems)}}>Добавить</button>
                </form>
            </div>
        </div>
    )
}

export default observer(ModalWindowComponent)

I've spent many hours trying to understand what's wrong but I couldn't

Answer 1

Your description and code is quite hard to follow. I would suggest making these changes:

1. Wrap with runInAction in asynchronous methods like this:

    axios.get("http://localhost:3000/db.json")
      .then((resp)=> {
           runInAction(() => {
               this.setPizzas(resp.data.pizzas)
           })
       }

2. setWeight, setSize and setPrice methods probably should be getters (mobx computed, not action). Add get before the method and you remove () parentheses. Example:

get setWeight() {
   return ...
}

and then in places where you use it:

pizzaStore.setWeight

Are there any errors on the console?