记一次react+mbox的踩坑经历

问题：
使用的是react和mbox，页面是用antd-mobile中的table封装的wulitable，columns设置显示的数据，但是需求是根据list的appid数据来对照mplist中的id数据，然后从mplist中拿到name数据显示到页面上，在这里我是这样写的

@observer
class Manager extends React.Component<IProps, {}> {

 componentWillMount() {
    entity.list.data.pagination.pageNum = 1;
    entity.loadMpList();
    entity.loadList();
  }


  columns = [
    {
      title: 'app',
      dataIndex: 'appId',
      //fixed: 'left'
      width: 200,
      render: (text, record, index) => {
        let name;
        // tslint:disable-next-line: one-line
        entity.list.data.mpList.map(v => {
          if (text === v.id) {
            name = v.name;
            return name;
          }
        });
        return name;
      }
    },
  ];

  render() {
    // console.log(entity.list.data.mpList);
    return (
      <div className="mp-list-page">
        <div className="content">
          <WULITable
            locale={{
              emptyText: '暂无数据'
            }}
            size={'small'}
            bordered
            columns={this.columns}
            rowKey={record => record.id}
            data={entity.list.data.list}
            currentPage={entity.list.data.pagination.pageNum}
            pageSize={entity.list.data.pagination.pageSize}
            total={entity.list.data.pagination.total}
            onPageChange={(page, pageSize) => {
              entity.setPagination({
                pageNum: page,
                pageSize: pageSize
              });
              entity.loadList();
            }}
          />
        </div>
      </div>
    );
  }
}

现在，问题出现了，刷新页面后，在 columns中render的name并没有显示，还是空白，在点击下一页之后才会显示，而其他在 columns 中没有用list数据渲染的可以直接显示，不会出现问题。

问题原因：
是因为react和mbox一起使用时，observer会观察react中render ()里需要观察的量，而由于用了antd中的table，mplist中的数据在本项目中藏在了render方法中columns的render中，套了两个render有冲突，导致mbox没有观察到mplist数据的变化，故在componentWillMount中请求了mplist数据但是还没收到返回的数据时，render了页面，当请求返回，mplist变化时，并不会再执行render()了。而list中的数据在react的render方法中的wulitable的参数中取到了，可以由mbox观察到，所以可以直接显示并不会出现问题‘

解决方法：

1. 将上段代码render()中加了一句console.log(entity.list.data.mpList);,这样mplist数据发生变化就会触发render()重新渲染页面，可以解决上述问题。
2. 让组件在拿到mplist数据之后再进行渲染，用到了asynic await，拿到了mplist之后再render()，可以。学到了！代码就在下面！变化就在代码的前几行！

@observer
class Manager extends React.Component<IProps, {}> {

  async componentWillMount() {
    entity.list.data.pagination.pageNum = 1;
    await this.loadData();
  }

  private async loadData() {
    await entity.loadMpList();
    await entity.loadList();
  }

  columns = [
    {
      title: 'app',
      dataIndex: 'appId',
      //fixed: 'left'
      width: 200,
      render: (text, record, index) => {
        let name;
        // tslint:disable-next-line: one-line
        entity.list.data.mpList.map(v => {
          if (text === v.id) {
            name = v.name;
            return name;
          }
        });
        return name;
      }
    },
  ];

  render() {
    return (
      <div className="mp-list-page">
        <div className="content">
          <WULITable
            locale={{
              emptyText: '暂无数据'
            }}
            size={'small'}
            bordered
            columns={this.columns}
            rowKey={record => record.id}
            data={entity.list.data.list}
            currentPage={entity.list.data.pagination.pageNum}
            pageSize={entity.list.data.pagination.pageSize}
            total={entity.list.data.pagination.total}
            onPageChange={(page, pageSize) => {
              entity.setPagination({
                pageNum: page,
                pageSize: pageSize
              });
              entity.loadList();
            }}
          />
        </div>
      </div>
    );
  }
}

以上就是今天的踩坑日记，有问题欢迎在评论指出，谢谢！