升级taro最新版1.3.20后编译报错

[jijingsong]

问题描述
升级最新版后，mobx store无法注入，打印出props显示为空，在1.2.X版本时无报错

复现步骤
1.基于mobx搭建项目
2. 从1.2.26升级到1.3.20，taro update self,taro update project
3. 为页面组件增加inject注解
4.启动，编译报错， TypeError: Cannot read property xxx of undefined

import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'
import { View, Text, Image } from '@tarojs/components';
import { AtIcon } from 'taro-ui'
import './index.scss'

@Inject('mainStore')
@observer
class Message extends Component {
config = {
navigationBarTitleText: '订单'
}
constructor() {
super()

}
getStore() {
console.log(this.props,'this.props')
return this.props.mainStore.messageStore
}
render() {
return (


)
}
}

export default Message

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

报错信息
TypeError: Cannot read property 'messageStore' of undefined
at Injector.getStore (index.js:59)
at Injector._createData (index.js:106)
at Injector.target._createData (index.js:213)
at Object.createComponent (index.js:2583)
at index.js:171
at require (WAService.js:1)
at :164:7
at HTMLScriptElement.scriptLoaded (appservice?t=1571651896485:2363)
at HTMLScriptElement.script.onload (appservice?t=1571651896485:2375)

系统信息

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

• 操作系统: macos
• Taro 版本 1.3.20
• Node.js 版本 10
• 报错平台 weapp

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[taro-bot]

CC @nanjingboy

[froyo-naux]

1.3.21也有这个问题, 暂时先降级到原来版本

[nanjingboy]

@jijingsong mainStore 的结构给我提供下，无法复现

[jijingsong]

@jijingsong mainStore 的结构给我提供下，无法复现

[taro-bot]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[nanjingboy]

@jijingsong 麻烦 messageStore 的结构也提供下

[jijingsong]

@jijingsong 麻烦 messageStore 的结构也提供下

[nanjingboy]

@jijingsong 大佬，还是不能复现，还是提供一个可重现的 demo 吧

[froyo-naux]

@nanjingboy 我这边复现出来了
步骤：

1. taro init demo
2. 创建一个store文件

import { observable } from "mobx";

class TestStore {
  @observable a = 1;
}

const store = {
  test: new TestStore()
};

export default store;

3. 修改生成的index.tsx

import Taro, { Component, Config } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import "./index.scss";
import { inject, observer } from "@tarojs/mobx";

@inject("test")
@observer
export default class Index extends Component {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: "首页"
  };

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {
    const {
      test: { a }
    } = this.props;
    console.log(a);
  }

  componentDidHide() {}

  render() {
    const { a } = this.props.test;
    return (
      <View className="index">
        <Text>{a}</Text>
      </View>
    );
  }
}

4. yarn dev:h5 (yarn dev:weapp没有报错)

结果：

index.esm.js?eb04:2478 TypeError: Cannot read property 'a' of undefined
    at WrappedComponent.componentDidShow (index.js?7a4d:21)
    at tryToCall (index.esm.js?eb04:2326)
    at WrappedComponent.newComponentDidShow [as componentDidShow] (index.esm.js?eb04:2356)
    at tryToCall (index.esm.js?eb04:2326)
    at WrappedComponent.componentDidMount (index.esm.js?eb04:2369)
    at eval (index.esm.js?eb37:1872)
    at errorCatcher (index.esm.js?eb37:1742)
    at eval (index.esm.js?eb37:1871)
    at Array.forEach (<anonymous>)
    at flushMount (index.esm.js?eb37:1867)

源代码：
demo.zip

[nanjingboy]

@nauxchen 已修复，下个版本更新后就可以了

[jijingsong]

@nauxchen 已修复，下个版本更新后就可以了

那是什么原因导致的呢？下个版本大概什么时候更新？

[nanjingboy]

@jijingsong 不知道你遇到的 store 信息读取不到的场景跟 @nauxchen 是否相同，如果相同的话是因为为修复 #4507 而将包装的父类直接指定为传递给 inject 的组件了，翻了下 mobx-react 的实现，他也不支持该 issue 的写法，就暂时先把针对这个 issue 的修改撤销了。 如果场景不同，还是得提供一个 demo。

下版本更新也就是这几天吧。

[taro-bot]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[jiangbo0216]

现阶段有什么解决办法吗，降级么

[jiangbo0216]

1.3.22貌似还是有这个问题

[taro-bot]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[shenghanqin]

issue贴的部分源码

@Inject('mainStore')
@Observer
class Message extends Component {
config = {
navigationBarTitleText: '订单'
}
constructor() {
super()

}

我的理解

我这边之前碰到过一个props传递不正确的小问题，解决方法就是正确传入props。

constructor(props) {
  super(props)
}

这里仅仅说明我的理解哈，可能不准确。
Taro小程序在启动后，会初始化一遍所有的page和Component（此时可能会传入store里面值）然后当组件实际运行时才会再传入defaultProps和组件传入的一些props，所以当你在super()处不写入props的话，就可能导致props不正确。

当然，还有另一种解释，ES6的constructor是必须要super(props)的，只不过Taro更加严格。

[shenghanqin]

当然我出现问题的场景是redux的store，我是觉得原理可能类似。