使用antd Table + mobx 處理數組 出現的一系列問題

在store中定義了一個數組： @observable list = [...]

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

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

這時就會提示以下錯誤：

從提示中可以看出dataSource希望的是一個數組而不是對象，

what？ 我什么時候傳入對象啦？

打印一下list：

 

原來是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）

說我數組索引超出范圍？

那好吧，看來observable怎么把我數組轉過去的，我就怎么給他轉回來。看文檔，mobx提供了toJS()函數，是這樣定義的：

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

ok, warning 消失了。

具體就是這么個過程， 至於observable如何把數組轉為對象 還有toJS又如何給它轉回來的，本人還需探究，也熱切希望了解的大佬們可以一起交流下