与mobx的出现的异常

[denlaku]

import React from 'react';
// import './css/Index.css';
import { observable, action, computed } from "mobx";
import {observer} from "mobx-react";
// import dataSetApi from "./apis/DataSet";
import { Table, Pagination, Button } from 'uiw';

const store = observable({
  title: 'this is home page',
  columns: [
    {key: "id", title: "ID", style: {color: "red"}}, 
    {key: "name", title: "名称"}, 
    {key: "createdBy", title: "创建人"}, 
    {key: "updatedBy", title: "更新人"},
    {key: "createdAt", title: "创建时间"}, 
    {key: "updatedAt", title: "更新时间"},
    {
      title: '操作',
      key: 'edit',
      width: 98,
      render: (text, key, rowData, rowNumber, columnNumber) => (
        <div>
          <Button size="small" type="danger">删除</Button>
          <Button size="small" type="success">修改</Button>
        </div>
      )
    }
  ],
  list: [],
  total: 0,
  // 获取首页数据
  async getList(page, size) {
    // let resp = await dataSetApi.getList(page, size);
    // this.list = resp.data;
    // this.total = resp.total;
  }
});

@observer
class DataSetList extends React.Component  {

  componentDidMount() {
    store.getList(1, 20);
  }

  render() {
    return (
      <div className="App">
          <Table
              columns={store.columns}
              data={store.list}
              bordered
              footer={
                <Pagination
                  current={1}
                  pageSize={10}
                  total={store.total}
                  divider
                  onChange={(current, total, pageSize) => {
                    store.getList(current, pageSize)
                  }}
                />
            }
          />
      </div>
    );
  } 
}

export default DataSetList;

[denlaku]

{key: "id", title: "ID", style: {color: "red"}}

这一行，加上style属性就会报错，去掉就没有问题了

[jaywcjlove]

@denlaku https://codesandbox.io/s/uiw-button-shili-9v1su 我加了一个没有毛病的样子。

[denlaku]

@jaywcjlove 用了toJS就好了，感谢