mobx+react 写的的代码，浏览器可以正常访问，嵌入客户端后报错，谢谢各位大神指导，万分感谢

看样子像是数组越界

对，不知道咋解决啊。。

你找到报错点的代码 看看发生了什么问题啊...

这是tojs之后的列表，也是正常的，不知道为什么会报错

这是在ie上看这个列表数据，有一大串undefined的，不知道溢出是不是这个造成的；

你哪里初始化的这些数据....

在这

......我觉得是toJs的问题

我也一直觉得是toJs的问题，这个问题在浏览器上没事，嵌入客户端就报这个错误了

版本号

您看到这个页面了吗，它不是一上来就报那个错，而是点击啊切换页面啊，走接口，然后不知道啥时候就报那个错了；估计就是溢出，老操作，就溢出了，操作的少的时候正常

代码截图

那说明你数据没有清理...

那该怎么操作一下呀，求指导。。

这个内存溢出的问题...没办法...只有你自己找...

昨天找了一天，实在找不出来。。。

在185.186.188打断点调试一下看看，还有你的props是什么样子的

普通定义的能显示出来参数，store里拿出来的只能是这样

这是store里接口返回的数据

10个，往下走就出错吗

好像就在166那

那该如何改一下试试呢

你是第一次就出错，还是多操作几次才出错

多操作几回接口，就出错，刚进去没事

操作出错时的数据是什么样的

谷歌上正常，ie里有这个

IE 非人类，就跟别人不一样，遇到IE就头疼

操作出错的次数固定吗

谷歌上报这个错，看打印的数据也是正常的

操作出错的次数不固定

试试先把usertable转为js，tojs（），在=赋值

先tojs再赋值是吗？试过了，不行。

mobx。Array的类型定义的是什么呀

试过把类型去了，也不行

怎样定义的数据类型

datalist = "";这样吗

datalist；这样也试了，还是 不行呀

不使用 es6的对象解构 来取出其中的datalist

试过了，也不行。。。

加个 数组.slice()

这样吗

把上边两个结构也先注释了,

直接一点

 datas=this. props. userTableStore. dataList.slice();

还是不行呀

就是这样做的。。。。

报啥错

就是上边这个红的

带不带.slice 都是一样的错吗

原来是这个错

const { counterStore: { catList } } = this.props;

console.log('counterStore ====catList====',catList.slice())

const newSort = catList.slice()

这个也试过。。。也不行

数组角标越界,数组长度大于10了,,要分析是解构使其越界,还是多次调用后使其数据多于10了

你这使其出错的那时候的数据是什么样子的

就是这个呀

应该不是结构啊，因为页面刚加载的时候是没有问题，点击操作之后才会出这个问题

那你比较一下，前几次没出错是的数据和这次出错是的数据看看有啥区别

没有区别，打印出来的数据还是正常的，上边这个图片不是打印了嘛。。

对了，代码在浏览器上正常，不会报错。在客户端里就不行了。。。

那就在客户端调试比较看看

上边这个图就是客户端的，打印出来的数据也正常。。。就是报错了

从浏览器移到客户端有没有什么改动的地方，

如果没有，那就找一下mobx+react在浏览器和客户端的差异区别

看看官方文档，论坛有相关信息吗

没有找到，找了挺长时间了

能不能帮忙找找，嘿嘿

大哥，你确定你再当前页面引入了 需要的mobx吗

当然引用了啊，浏览器是正常的，没有问题的啊

可以在mobx.Array有个返回index的地方打个短点，调试一下看看咋就超过10了

你能吧userManage代码发出来吗

估计你dispatch 的时候参数传错了

const { userTableStore:{ } } = this. props

感觉错误就在你解构数据那里

dispath是啥。。

就是你改变 store的一种说法

你这么问问题，没有代码，看图只能靠猜的，你直接把代码一copy就完事了，会的人一眼就看出来了

import React from 'react'

import ReactDOM from 'react-dom';

import { toJS } from 'mobx';

import { Button, Icon, Table, Divider, message, Modal, Row} from 'antd';

import CustomBreadcrumb from '../../common/CustomBreadcrumb/index'

import Form2 from '../../common/Form/CreateUser';

import Searchs from './TableListTop';

import ImportDialog from './ImportDialog';

import { Encrypt, Decrypt ,GetToken} from '../../../utils/aes';

// import ReactToPrint from 'react-to-print';

// import ReactHTMLTableToExcel from 'react-html-table-to-excel';

import { observer, inject } from 'mobx-react';

import $ from 'jquery';

const { confirm } = Modal;

let datas=[];

@inject('userTableStore')

@observer

class UserManage extends React.Component {

 constructor(props){

  super(props);

  this.state = {

   pagination: {

    current:"1",

    pageSize:'10',

   },

   qymc:'',

   qyxz:'',

   params:{},

   columns2:[

    {

     title: '客户名称',

     dataIndex: 'qymc',

     // width: 200,

    }, {

     title: '企业税号',

     dataIndex: 'qysh',

     // width: 150,

    }, {

     title: '企业性质',

     dataIndex: 'qyxz',

     render: (text, record) =>{

      {

       if(record.qyxz==0){

         return (<span>一般纳税人</span>)

       }else{

         return (<span>小规模</span>)

       }

      }

     }

    },{

     title: '联系人',

     dataIndex: 'lxr',

    // width: 100,

    }, {

     title: '联系电话',

     dataIndex: 'lxdh',

    // width: 100,

    }, {

     title: '操作',

     key: 'action',

     render: (text, record) => (

      <span>

      <Form2 names={"编辑"} icons={"edit"} colors={"#1890ff"} states={this.state.params} datass={record}/>

      <Divider type="vertical"/>

      <a className="ant-dropdown-link" onClick={()=>this.deleteData(record.id)}>

       <Icon type="delete" />删除

      </a>

     </span>

     ),

    }]

  }

 }

 componentWillMount() { // 初始化渲染页面

   this.doStore()

 }

 //搜索条件

 searchCondition = (searchs) =>{

  this.setState({

   qymc:searchs.value,

   qyxz:searchs.nsType,

   pagination:{current:1}

  },function(){

   this.doStore()

  })

 }

//删除本条数据

 deleteData = (keyid) =>{

 var _this=this;

  confirm({

  title: '确定要删除所选客户信息吗?',

  content: '',

  okText:"确定",

  cancelText:"取消",

  onOk() {

   //console.log(keyid);

   const { userTableStore: { delEntInfo } } = _this.props;

   let params={id:keyid}

   delEntInfo(params,_this.state.params)

  },

  onCancel() {

  },

 });

}

 //导出操作

 exportTable = () =>{

  const { userTableStore: { exportEntData } } = this.props;

  let param={

   qymc:this.state.params.qymc,

   qyxz:this.state.params.qyxz,

   userId:'1'

  }

  exportEntData(param);

 }

 componentWillUnmount(){

  // datas=[]

  // console.log(datas);

 }

 componentDidMount(){

  // let temp=$(ReactDOM.findDOMNode(this.refs['test'])).find('table')

  // temp.attr('id','table-to-xls')

 }

 //table操作：分页，上一页下一页等

 onTableChange = (pagination, filters, sorter) => {

  //this.loadData(pagination);

  this.setState({

   pagination:pagination

  },function(){

   this.doStore()

  })

 };

  doStore = () =>{

  const {qymc,qyxz,pagination} =this.state;

  let paramsss={"pageNo":pagination.current,"pageSize":pagination.pageSize,"qymc":qymc,"qyxz":qyxz,"userId":"1" };

  this.setState({params:paramsss})

  const { userTableStore: { doInitUser } } = this.props;

  doInitUser(paramsss);

  }

  componentWillReact() {

    //console.log("重渲染, 当data改变的时候!");

  }

 render() {

  const rowSelection = {

   onChange: (selectedRowKeys, selectedRows) => {

    //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);

   },

   getCheckboxProps: record => ({

    disabled: record.name == 'Disabled User', // Column configuration not to be checked

    name: record.name,

   }),

  };

  let {columns2} = this.state

  let total={showTotal: ((total=100) => {

    return `共 ${total} 条`;

   })}

  let names="添加";

  let icons="plus";

  let colors="#fff";

  const { userTableStore } = this.props;

  const { dataList, pagination } = userTableStore;

  //datas=this.props.userTableStore.dataList.slice()

  datas=toJS(dataList)

  // datas=dataList.slice();

  //console.log('data',datas)

  datas.map((item)=>{

    //console.log(toJS(item))

    return toJS(item)

  })

  return (

   <div className="userManageTable">

    <CustomBreadcrumb arr={['客户管理']}/>

    <Row>

     <Searchs searchCondition={this.searchCondition}/>

    </Row>

    <div id='select'>

     <Row className="actionList">

      <Button type="primary"><Form2 names={names} states={this.state.params} icons={icons} colors={colors}/></Button>

      <ImportDialog/>

      <Button onClick={this.exportTable}><Icon type="export" />导出</Button>

     </Row>

     <Table rowKey="id" key="usermanage" dataSource={datas} rowSelection={rowSelection} onChange={this.onTableChange.bind(this)} pagination={{...pagination,...total, showSizeChanger: true, showQuickJumper: true}} bordered columns={columns2} style={styles.tableStyle}/>

    </div>

   </div>

  )

 }

}

const styles = {

 tableStyle: {

  width: '100%',

 },

 affixBox: {

  position: 'absolute',

  top: 100,

  right: 50,

  with: 170

 }

}

export default UserManage

这个

我看看哈

好嘞，还需要啥你和我说哈

你干掉这个试试，然后看看这方法的 回调

不知道你这个是如何出的错，但我感觉就是参数没用对

干掉不行吧，那就不调用事件了啊，不调用事件不走接口哪来的数据

你是一进来就报错还是点什么报错的

刚进来没有问题，是点击几次之后出现这个问题

你确定后端返回的数据没有问题，或者在多次点击后参数无丢失吗。

你点击的是下一页或上一页码

没问题的，这个在浏览器上没有问题，只是在客户端里会出现这个问题

是左侧的菜单

那离开页面到时候，卸载下数据

怎么卸载呢

componentWillUnmount 里面你看看数据，点击菜单应该是离开当前页面了，有可能你的数据没有初始化

也有可能是两个页面的数据有冲突，你的命名再另一个页面也使用了

这样也不行，命名改了也不行。。。

工程甩出来，比你这样说快多了

首先你得缩小问题范围，比如，你是在当前页面操作出的错误，还是你跳转别的页面之后出的错误。再有就是跳到某一页之后上页的路由导致某页出现报错。

然后我看你的代码是报错是userManage的请求时候出的问题。也就是说 你在别的页面进入到这个页面之后出的问题

感觉不是什么大问题，你应该很快解决了。

还是没解决啊。。这些我都试了

一开始渲染页面的时候，还没走接口渲染的时候就有这么多undefined，但是toJS之后就没有了，会不会是这个问题导致的客户端一直报错呀各位大神

mobx 不设置初始值的吗？

你加两个东西

1.if(useTable){

2。{ dataList ={} } = useTable

逻辑代码

}

一直都是这么写，再在页面中引入这个datalist，这样有问题吗。。

估计解析的时候 你的useTable 可能 没有数据，那你加一个if试试

才发现你这代码。。。

为什么要在render 里面调用逻辑函数？

有点沙雕啊

这样很容易内存泄漏，要避免这种写法，render层做渲染的，你用来大量计算，每render一次你就计算一次，内存不够的，数据量大的，直接崩掉

那应该写在哪呀，以前一直这样写。。。

这个就得在render里写啊，不然数据变了它不会重新render渲染页面

mobx redux saga都是解决这个问题的。首先你的知道，哪个是你自己的业务层JS，哪个是逻辑层的JS,哪个是本页状态还有UI渲染的，你这个是组件架构问题。

只用props就可以了

这个问题你自己得想想，我给你个思路，你不把业务拆分以后还会出现，你想想你的数据都在mobx了，为什么不拿到数据就处理呢？

能不能稍微具体点呀，我用这个做项目做的少，现在也是拿到数据就处理的啊。。

之前数据量再大也没事，现在应该是嵌在客户端了，所以报错了

你就吧toJs拿走不要在render下执行就可以了，其他没啥

拿到哪啊，拿走解析不了list了啊。。。

这样，你先排查问题，先拿走toJS 然后给个空数组，看看是不是这个问题，然后，在mobx,请求数据成功后，解析成单独一个数组，然后存起来，你需要编辑的逻辑，也在那里完成

百分百是这个坑

直接在store里把数据处理了，对吗

对

store里用tojs没用。。。

tojs 发出来我看看是什么方法

直接转换然后打印，把其他代码注释掉

返回的值要先赋值 并且不能直接使用

toJs(list) || []

const newList = toJs(list) || [];

IE兼容写法你去查查MDN 开发者里面，mobx应该是不兼容的，还有就是你去mobx的官方库去提问，尝试看看有没有解决方法

图1是render里的，拿到的数据格式还是observablearray. 在图2里已经tojs了

去官方问下吧。我无法解决

去官网上问吗。。

你试试这样

if(ress.code=200){
    const {list:[val1,val2,val3,val4,val5,val6,val7,val8,val9]} = ress.data
    this.dataList=list
    this.pagination.total = Number(ress.data.total)
}

方便的话,add 2450957609

qq

你同意一下

知道报错的大概位置吗？在报错之前加几个log看看吧，

我之前做过客户端嵌套网页的项目，一般可能是客户端少了浏览器的某个对象或者属性造成错误。

客户端只能认为是具有90%的浏览器功能。

https://blog.csdn.net/angular_/article/details/105661721

https://www.jianshu.com/p/24cf2ddbf4a6

看看这两篇文章吧 看看你的代码里是否有这样的情况存在？

https://www.cnblogs.com/dlight/p/biwen.html