Mobx遇到的问题

使用 @observable 装饰的类型可以使字典和对象,数组等。
使用字典的例子:

export default class CustomChartStore implements ChartPropsInterface {
      @observable
      public selectedIndex: number;
      @observable
      public listData: any[];
      constructor(data: any[], index: number) {
            this.selectedIndex = index;
            this.listData = data;
      }
}
   constructor(props: any) {
            super(props);
              let arr: Array<any> = new Array<any>();
            for (let i = 0; i < 7; i++) {
                  arr.push({day:"4-21",date: "23.5",isSelected:false});
            }
//这里只是赋值为字典
            this.model = new ChartModel(arr,6);


            this.model.listData = arr;
            this.model.selectedIndex = props.selectedIndex;
                let item = this.model.listData[props.selectedIndex];
                item.isSelected = true;// 修改item -字典的值,触发render
      }

      render() {
            return (
                  <View style={{ flex: 1 }}>
                        <Text> 每日收益</Text>
                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-around", marginBottom: 0 }}>
                              {this.model.listData.map(this.renderItem)}
                        </View>
                  </View>

            );
      }

      onPress(index: number) {
            const lastIndex = this.model.selectedIndex;

            let item = this.model.listData[lastIndex];
            item.isSelected = false;
            this.model.selectedIndex = index;
            item = this.model.listData[index];
            item.isSelected = true;
      }

但是如果说对象里面嵌对象,就需要使用装饰器装饰最里面的对象。
例如:

// 这里只需要装饰`isSelected`
export class ChartItem {
      date:string;
      earning:string;
  @observable    isSelected:boolean;
      constructor(d:string,e:string,sel:boolean= false){
            this.date = d;
            this.isSelected=sel;
            this.earning = e;
      }
}
export interface ChartPropsInterface {
      selectedIndex:number;
      listData:ChartItem[];

}
export default class CustomChartStore implements ChartPropsInterface  {

public selectedIndex:number;

public listData:ChartItem[];
constructor(){

}
}

// other file2.tsx
   constructor(props: any) {
            super(props);
            this.model = new ChartModel();
            let arr: Array<ChartItem> = new Array<ChartItem>();
            for (let i = 0; i < 7; i++) {
                  arr.push(new ChartItem("4-21", "23.5"));
            }

            this.model.listData = arr;
            this.model.selectedIndex = props.selectedIndex;
                let item = this.model.listData[props.selectedIndex];
                item.isSelected = true;
      }

      render() {
            return (
                  <View style={{ flex: 1 }}>
                        <Text> 每日收益</Text>
                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-around", marginBottom: 0 }}>
                              {this.model.listData.map(this.renderItem)}
                        </View>
                  </View>

            );
      }

      onPress(index: number) {
            const lastIndex = this.model.selectedIndex;

            let item = this.model.listData[lastIndex];
            item.isSelected = false;
            this.model.selectedIndex = index;
            item = this.model.listData[index];
            item.isSelected = true;
      }



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容