利用mobx和sectionList完成购物车效果遇到问题,求大佬给点思路



  • 期待实现效果:

    期待效果
    点击底部的红框中的全选按钮,联动每个sectionHeader为selected状态

    问题描述

    现在出现问题是我点击底部的全选按钮,报错
    报错截图
    提供的解决方式是让我把其中一个属性取消可观察状态,但确实我需要监听两个值的属性变化

    已经尝试的方法

    • 利用computed的getter和setter方法,setter方法不调用(可能是没用对?)
    • 在点击computed getter方法中对,sectionHeader的isSelected方法进行赋值,直接报上面的错误

    代码片段

    shopStore

    
    import { observable,action,computed, values, observe } from "mobx";
    import PropTypes from 'prop-types'
    import ShopCartModel from './ShopCartModel'
    
    
    
    export default class ShopCartStore {
        @observable 
        sections = [];
        
        @observable
        isAllSelected = false;
        @computed get dataSource (){
            return this.sections.slice()
        }
        @action 
        getShopCartData(){
            let data = [
                { title: "Title1", data: ["item1", "item2"] },
                { title: "Title2", data: ["item3", "item4"] },
                { title: "Title3", data: ["item5", "item6"] }
              ];
            
            let tempData = [];
            data.map((value,index)=>{
                  tempData.push(
                      new ShopCartModel(value["title"],["item1","item2","item3"],this)
                  )
            })
            this.sections = tempData;
        }
    
        @action
        setSelected = ()=>{
            this.isAllSelected = !this.isAllSelected;
            
        }
        @computed get totalCount(){
            return this.sections.reduce((a,b)=>a+b.data.reduce((a,b)=>b.isSelected?a+b.count:a,0),0)
        }
    
        @computed get totalPrice(){
            return this.sections.reduce((a,b)=>a+b.data.reduce((a,b)=>b.isSelected?a+b.count * parseFloat(b.price):a,0),0)
        }
    
    
    
    }
    
    export  const shopCartStore = new ShopCartStore();
    
    

    sectionModle

    
    import { observable,action,computed, runInAction} from "mobx";
    import PropTypes from 'prop-types'
    import ShopCartStore from './index'
    import ShopCartItem from './ShopCartItem'
    import { TouchableHighlightBase } from "../../../node_modules/@types/react-native";
    
    export default class ShopCartModel {
        title:string
        data=[]
        @observable
        isSelected = false;
        // @observable
        private shopCartStore:ShopCartStore
    
        constructor(title,data,shopCartStore){
            this.title = title;
            let temp = [];
            data.map((item,index)=>{
                temp.push(
                    new ShopCartItem(index,item,3,this)
                )
            })
            this.data = temp;
            this.shopCartStore = shopCartStore;  
        }
    
        @computed get allSelected() {
            this.isSelected = this.shopCartStore.isAllSelected;
            return this.shopCartStore.isAllSelected || false;
        }
        set allSelected(isSelected){
            this.isSelected = isSelected || false;
        }
        @action
        setSelected = () => {
            this.isSelected = !this.isSelected;
        }
    
        setUp = () =>{
            runInAction(()=>{
                this.isSelected = this.shopCartStore.isAllSelected;
                // console.log('section====================================');
                // console.log(this.isSelected);
                // console.log('====================================');
            })
        }
    }
    

    求助各位大佬,谷歌百度我翻遍了,没找到别人有类似的疑问,难道我是全网独一份o(╥﹏╥)o



  • 问题已经解决,但不知道是不是对的解决办法,也给有同样问题的朋友一点思路,起码先应付完眼前的工作Demo