使用antd Table + mobx 处理数组 出现的一系列问题

摘要:
存储区中定义了一个数组:@observablelist=[…]如果您在表组件中直接使用列表:将提示以下错误:从提示中,您可以看到dataSource想要的是数组而不是对象,什么?打印列表:事实证明,mobx的可观察值被一个层覆盖,该层将数组转换为一个对象……从文档中,mobx提供了toJS()函数,其定义如下:<TableclassName={styles.table}columns={this.columns}dataSource={toJS}/>确定,警告消失。这是一个具体的过程。至于observable如何将数组转化为对象,以及JS如何将其转化为对象的问题,我仍然需要探索并与渴望了解的领导者交谈

在store中定义了一个数组: @observable list = [...]

若是在table组件中直接使用list:

  <Table
       className={styles.table}
       columns={this.columns}
       dataSource={list}
  />

这时就会提示以下错误:

使用antd Table + mobx 处理数组 出现的一系列问题第1张

从提示中可以看出dataSource希望的是一个数组而不是对象,

what? 我什么时候传入对象啦?

打印一下list:

使用antd Table + mobx 处理数组 出现的一系列问题第2张

原来是mobx的observable在外面包了一层,把数组转为对象了。。。

那么我们要做的就是把对象转为数组,可以这样做:

  <Table
       className={styles.table}
       columns={this.columns}
       dataSource={list.slice()}
  />

或

const newList = [...list]
  <Table
       className={styles.table}
       columns={this.columns}
       dataSource={newList}
  />

...

然鹅,此时又会出现好多个warning, 哦妈噶,太阔怕了(跑.gif)

使用antd Table + mobx 处理数组 出现的一系列问题第3张

说我数组索引超出范围?

那好吧,看来observable怎么把我数组转过去的,我就怎么给他转回来。看文档,mobx提供了toJS()函数,是这样定义的:

使用antd Table + mobx 处理数组 出现的一系列问题第4张

 <Table
    className={styles.table}
    columns={this.columns}
    dataSource={toJS(list)}
/>

ok, warning 消失了。

具体就是这么个过程, 至于observable如何把数组转为对象 还有toJS又如何给它转回来的,本人还需探究,也热切希望了解的大佬们可以一起交流下

 

免责声明:文章转载自《使用antd Table + mobx 处理数组 出现的一系列问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇(转)MSSQL 各个发行版本版本号以及Compact 版本号react基础---react全家桶03下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

java list按照元素对象的指定多个字段属性进行排序

ListUtils.java---功能类 package com.enable.common.utils;import java.lang.reflect.Field;import java.text.NumberFormat;import java.util.Collections;import java.util.Comparator;import j...

常见Oracle HINT的用法

在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法: 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_IN FROM BSEMPMS WHERE EM...

Dbutils

 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序的性能。因此dbutils成为很多不喜欢hibernate的公司的首选。   DbUtils组件, 1.       简化jdbc操作 2.       下...

laravel 导出插件

转发:https://blog.csdn.net/gu_wen_jie/article/details/79296470 版本:laravel5           php 5.6 安装步骤: 一、安装插件 ①、首先在Laravel项目根目录下使用Composer安装依赖: composer require "maatwebsite/excel:~2.1....

04-表格 table(会使用)

第01阶段.前端基础.表格 HTML 第二天目标 能够利用表格、列表和表单完成注册页面的综合案例 能出说表格用来做什么的 能说出列表用来做什么的 能说出表单用来做什么的 为了让我们页面显示的更加整齐,我们需要学习三个表(表格、表单、列表) 表格 table(会使用) 目标: 理解: 能说出表格用来做什么的 表格的基本结构组成 应用: 能够熟练...

MVVM大比拼之avalon.js源码精析

简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高。 将原始对象用object.defineProperty重写,不需要用户像用knockout时那样显示定义各种属性。 对低版本的IE使用了VBScript来兼容,一直兼容到IE6。 需要看基础介绍的话建议直接看司徒的博客。在网上搜...