1.3.4 mobx处理数组报错

[yuquanwang]

问题描述
升级到1.3.4（估计1.3.0以上都有这问题），之前使用mobx写的observe数组的地方均报错，数组更新，但是无法取得数组内的item。报错undefined；

复现步骤
[复现问题的步骤]

1. 使用1.2.26版本，集成mobx，采用mobx5.9.4以上，
2. 编写class observable其某个数组的属性
3. 使用该属性的map方法进行页面渲染，并验证使用正常
4. 升级taro所有库的版本到1.3.4
5. 报错

export default class SomeClass {
...
@observable someArr: [] = []
...
}

期望行为
[这里请用简洁清晰的语言描述你期望的行为]

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

Taro CLI 1.2.26 environment info:
System:
OS: macOS 10.14.3
Shell: 2.7.1 - /usr/local/bin/fish
Binaries:
Node: 10.8.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.2.0 - /usr/local/bin/npm
npmPackages:
@tarojs/async-await: ^1.2.17 => 1.3.4
@tarojs/cli: ^1.2.26 => 1.3.4
@tarojs/components: ^1.2.17 => 1.3.4
@tarojs/mobx: ^1.2.26 => 1.3.4
@tarojs/mobx-h5: ^1.2.26 => 1.3.4
@tarojs/mobx-prop-types: ^1.2.26 => 1.2.26
@tarojs/mobx-rn: ^1.2.26 => 1.3.4
@tarojs/plugin-babel: ^1.2.17 => 1.3.4
@tarojs/plugin-csso: ^1.2.17 => 1.3.4
@tarojs/plugin-sass: ^1.2.17 => 1.3.4
@tarojs/plugin-uglifyjs: ^1.2.17 => 1.3.4
@tarojs/router: ^1.2.17 => 1.3.4
@tarojs/taro: ^1.2.17 => 1.3.4
@tarojs/taro-alipay: ^1.2.17 => 1.3.4
@tarojs/taro-h5: ^1.2.17 => 1.3.4
@tarojs/taro-swan: ^1.2.17 => 1.3.4
@tarojs/taro-tt: ^1.2.17 => 1.3.4
@tarojs/taro-weapp: ^1.2.17 => 1.3.4
@tarojs/webpack-runner: ^1.2.17 => 1.3.4
eslint-config-taro: ^1.2.17 => 1.3.4
eslint-plugin-taro: ^1.2.17 => 1.3.4
nervjs: ^1.3.9 => 1.4.3

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[nanjingboy]

@yuquanwang CLI 升级看看呢

[Garfield550]

npmPackages:
@tarojs/async-await: ^1.2.17 => 1.3.4 
@tarojs/cli: ^1.2.26 => 1.3.4 
@tarojs/components: ^1.2.17 => 1.3.4 
@tarojs/mobx: ^1.2.26 => 1.3.4 
@tarojs/mobx-h5: ^1.2.26 => 1.3.4 
@tarojs/mobx-prop-types: ^1.2.26 => 1.2.26 // 你这个是 1.2.26 没有升级 1.3.4
@tarojs/mobx-rn: ^1.2.26 => 1.3.4 
@tarojs/plugin-babel: ^1.2.17 => 1.3.4 
@tarojs/plugin-csso: ^1.2.17 => 1.3.4 
@tarojs/plugin-sass: ^1.2.17 => 1.3.4 
@tarojs/plugin-uglifyjs: ^1.2.17 => 1.3.4 
@tarojs/router: ^1.2.17 => 1.3.4 
@tarojs/taro: ^1.2.17 => 1.3.4 
@tarojs/taro-alipay: ^1.2.17 => 1.3.4 
@tarojs/taro-h5: ^1.2.17 => 1.3.4 
@tarojs/taro-swan: ^1.2.17 => 1.3.4 
@tarojs/taro-tt: ^1.2.17 => 1.3.4 
@tarojs/taro-weapp: ^1.2.17 => 1.3.4 
@tarojs/webpack-runner: ^1.2.17 => 1.3.4 
eslint-config-taro: ^1.2.17 => 1.3.4 
eslint-plugin-taro: ^1.2.17 => 1.3.4 
nervjs: ^1.3.9 => 1.4.3 

[zhangchenna]

根本不支持 5以上的mobx 只能用4.8

[nanjingboy]

@zhangchenna 默认使用 4.8 是因为小程序可能运行在低端的机器上，如果你不需要兼容低端机器的话，可以使用 5+ 啊，没有强制你绑死在 4.8

[zhangchenna]

@zhangchenna 默认使用 4.8 是因为小程序可能运行在低端的机器上，如果你不需要兼容低端机器的话，可以使用 5+ 啊，没有强制你绑死在 4.8

我试了5+ 的类数组类对象 都不能生成正常数组 方法无效 4.8 正常 例如 Array.from()

[nanjingboy]

@zhangchenna 如果说 4.8 正常的话，那么 5+ 应该不会有问题，建议再仔细看下 mobx 文档或给个完整的 demo 看看。不然无法定位

[yuquanwang]

OK，前段时间忙，晚上我看下 Mutrix

…

在 2019年7月16日，下午3:52，Tom Huang ***@***.***> 写道： @zhangchenna 如果说 4.8 正常的话，那么 5+ 应该不会有问题，建议再仔细看下 mobx 文档 或给个完整的 demo 看看。不然无法定位 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[yuquanwang]

taro init了一个新项目进行复现，发现是在jsx中传入的mobx数组全部变成了[]。

  render() {
    const { usualDrugs } = this.props.user!;
    + const drugs = usualDrugs.map((item) => {
    +  return new Drug({
    +    genericName: item.genericName,
    +    brandName: item.brandName,
    +    factory: item.factory,
    +    productList: [item]
    +  })
    +})

    + console.log('drugs: ', drugs);

    return (
      <View className='index'>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        + {drugs.length &&
        +  <View className='panel'>
        +    <View className='panel__title'>常用药品</View>
        +     <DrugList list={drugs} />  // 该自定义组件中打印的props.list为[]
        +  </View>}
      </View>
    )
  }

[Garfield550]

Due to limitations of native arrays in ES5 observable.array will create a faux-array (array-like object) instead of a real array. In practice, these arrays work just as fine as native arrays and all native methods are supported, including index assignments, up-to and including the length of the array.

Bear in mind however that Array.isArray(observable([])) will yield false, which some native array manipulation methods require and which some external libraries may also require. E.g. [].concat(observable([])) will not work as expected since the native array concat method expects the test to return true. So whenever you need to pass an observable array to an external library or use the observable array as an argument to native array manipulation methods, you should create a shallow copy by using array.slice(), which will cause Array.isArray(observable([]).slice()) to yield true.

Ref: https://mobx.js.org/refguide/array.html