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;
      }



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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,355评论 19 139
  • 前言我从去年开始使用 RxJava ,到现在一年多了。今年加入了 Flipboard 后,看到 Flipboard...
    占导zqq阅读 12,991评论 6 151
  • 文章转自:http://gank.io/post/560e15be2dca930e00da1083作者:扔物线在正...
    xpengb阅读 11,878评论 9 73
  • 我从去年开始使用 RxJava ,到现在一年多了。今年加入了 Flipboard 后,看到 Flipboard 的...
    Jason_andy阅读 10,915评论 7 62
  • 你在石凳上静坐, 石凳把温度给你。 夏天时, 你知道了什么叫热。 冬天时, 你知道了什么叫了冷。 而在秋天, 你学...
    小剧在成长阅读 1,924评论 0 5