相关文章推荐
欢快的南瓜  ·  HTTP请求示例--AI中台公用文档-火山引擎·  1 周前    · 
睿智的钢笔  ·  博导、硕导——王海燕教授-陕西科技大学电子信 ...·  1 月前    · 
狂野的毛豆  ·  大和是凯多的儿子还是女儿– 快看漫画问答·  3 月前    · 
潇洒的企鹅  ·  天津煎饼和山东煎饼的核心工艺区别是什么？ - 知乎·  1 年前    · 
路过的皮带  ·  BTS - Strategy Made ...·  1 年前    · 
一直单身的桔子  ·  柴可夫斯基作品精选集锦| 数字音乐厅·  1 年前    · 
小百科  ›  【mobx】高阶组件当中在comonentWillMount生命周期中使用async/await之后导致pages页面中更改mobx数据后页面不重新渲染 · Issue #1414 · NervJS/
const string
曾深爱过的八宝粥
4 月前

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account 该问题只发生在componentWillMount生命周期内：
在高阶组件中，componentWillMount生命周期当中使用了async/await, 在 await 之后调用super.componentWillMount()。导致在使用该高阶组件的page中的mobx观察对象中的数据即使发生了改变，UI层也不会重新渲染，这是什么问题？

login.js 高介组件 

// login.js
export default function weappLogin (lifecycle: string = 'willMount') {
    if (!LIFE_CYCLE_MAP.includes(lifecycle)) {
        return component => component
    return function withLogin(component) {
        @inject('user')
        class withLoginComponent extends component {
            //TODO:: componentWillMount 当中使用了await 导致外层mobx观察数据发生改变，ui层不重新渲染。该问题只发生在 componentWillMount生命周期中
            async componentWillMount() {
                if (super.componentWillMount && lifecycle === LIFE_CYCLE_MAP[0]) {
                    //TODO:: 此处使用了 await  去除掉await无异常。
                    const res = await this.autoLogin()
                    if (!res) return
                super.componentWillMount && super.componentWillMount()
            async componentDidMount() {
                if (super.componentDidMount && lifecycle === LIFE_CYCLE_MAP[1]) {
                    const res = await this.autoLogin()
                    if (!res) return
                super.componentDidMount && super.componentDidMount()
            async componentDidShow() {
                if (super.componentDidShow && lifecycle === LIFE_CYCLE_MAP[2]) {
                    const res = await this.autoLogin()
                    if (!res) return
                super.componentDidShow &&  super.componentDidShow()
            async autoLogin () {
                const { user } = this.props
                if (user.jwt) {    
                    return true;    
                await user.login()
                if (user.jwt) {
                    return true;
                Taro.showModal({title: '登录提醒', content: '当前操作需要登录后继续使用',confirmText: '前往登录', showCancel: false}).then(() => {
                    Taro.navigateTo({url: '/pages/login/index'})
                return false
            render() {
                super.render();
        return withLoginComponent

使用login.js的pages：


// home/index.js
import Taro, { Component,Config } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtIcon } from 'taro-ui'
import { share, login } from '../../decorator'
import { User } from '../../store/declare'
import './index.scss'
interface HomeProps { 
    user: User
@share()
@login()
@inject('user')
@observer
export default class Home extends Component<HomeProps, {}> {
    static defaultProps = {} as HomeProps
    config: Config = {
        navigationBarTitleText: '我的'
    constructor(props) {
        super(props);
    componentWillMount() {
        const { user } = this.props
        // TODO::加载用户详情数据, 此处加载完用户数据之后，改边userInfo后，该页面并不会重新渲染
        user.loadInfo()
    componentDidMount() {
    navigateTo(url: string) {
        Taro.navigateTo({
            url: url
    // 提现
    onBalance() {
        const {user: { balance}} = this.props
        if ( balance < 0  ) {
            Taro.showToast({
                title: '暂时没有可提现金额',
                icon: 'none'
            return
        this.navigateTo('/pages/capital/balance')
    render() {
        const {user: {userInfo: {nickName, avatarUrl, phone}, frozen, cashed, balance}} = this.props
        console.log(nickName,balance);
        return (
            <View className='home_container'>
            </View>

mobx  user


// user.js    mobx
import Taro from '@tarojs/taro'
import { observable, flow, configure, action  } from 'mobx'
import { GetData, SetData, JWT, JWTEXPIRE } from '../utils/storage' // 缓存信息
import { UserInfo, PushEl, ReceEl } from '../interfaces/user'
import delay from '../utils/delay'
// 设定数据只能在action 中改变
configure({ enforceActions: 'observed' })
interface register {
    phone: string,
    yzm: string,
    [key: string]: any
const user = { 
    name: '章三',
    phone: '18080093730',
    nickName: '飞象',
    city: '成都',
    sign: '才不要些什么签名',
    balance: 500,
    cashed: 1000.50,
    frozen: 268.36,
    avatarUrl: 'http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'
class User {
    @observable uuid: string = ''
    @observable jwt: string = GetData(JWT) || ''
    @observable balance: number = 0
    @observable cashed: number = 0
    @observable frozen: number = 0
    @observable userInfo: UserInfo
    constructor() {
        this.userInfo = {} as UserInfo
    // 登录
    login = flow(function * () {
        // TODO:: 增加延时，测试代码，开发需替换
        yield Taro.request({url: 'https://www.baidu.com'}) 
        console.log('88888')
        SetData(JWT, 'jwt', JWTEXPIRE)
        this.jwt = 'jwt'
    // 用户信息
    loadInfo = flow(function * () {
        const { balance, cashed, frozen } = user
        this.cashed = cashed
        this.balance = balance
        this.frozen = frozen
        this.userInfo = user
        console.log(this.balance)
    // 注册
    register = flow(function * (regData: register) {
        console.log(regData)
        this.uuid = '456'
    // 更新用户数据
    updateData = flow(function * (attr: string, value: string) {
        let info = this.userInfo
        if (info.hasOwnProperty(attr)) {
            // TODO:: 缺少发起更改请求
            info[attr] = value
            this.userInfo = Object.assign({}, this.userInfo, info)
            return true
        return false
    // 修改手机号码
    updatePhone = flow(function * (phone:string, code: string) {
        //TODO:: 修改手机号码
        return true
    // 提现申请
    sendCashed = flow(function *() {
        // 更新userInfo 金额
        return true
    // 发送验证码
    @action
    sendSms(phone: string) {
export default new User()





    


希望可以在高阶组件当中componentWillMount生命周期中正常使用async/await。


  • 操作系统:  mac 10.14
    • 

  • Taro 版本  1.2.0-beta.10
    • 

  • Node.js 版本  v11.3.0
    • 

  • 报错平台  weapp
    • 
[根据你的调查研究，出现这个问题的原因可能在哪里？]
    
          
    欢迎提交 Issue~
    

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

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

    Good luck and happy coding~
    
          
    @nanjingboy 我发一个package.json给你，你重新安装试试呢，刚刚我重新安装inject获取不到props的情况又出现了。。
    
	"name": "hooyen",
	"version": "1.0.0",
	"private": true,
	"description": "hooin版本小程序端",
	"scripts": {
		"build:weapp": "taro build --type weapp",
		"build:swan": "taro build --type swan",
		"build:alipay": "taro build --type alipay",
		"build:h5": "taro build --type h5",
		"build:rn": "taro build --type rn",
		"dev:weapp": "npm run build:weapp -- --watch",
		"dev:swan": "npm run build:swan -- --watch",
		"dev:alipay": "npm run build:alipay -- --watch",
		"dev:h5": "npm run build:h5 -- --watch",
		"dev:rn": "npm run build:rn -- --watch"
	"author": "",
	"license": "MIT",
	"dependencies": {
		"@tarojs/async-await": "1.2.0-beta.6",
		"@tarojs/components": "1.2.0-beta.6",
		"@tarojs/mobx": "^1.2.0-beta.5",
		"@tarojs/mobx-h5": "^1.2.0-beta.5",
		"@tarojs/mobx-rn": "^1.2.0-beta.5",
		"@tarojs/router": "1.2.0-beta.6",
		"@tarojs/taro": "1.2.0-beta.6",
		"@tarojs/taro-alipay": "1.2.0-beta.6",
		"@tarojs/taro-h5": "1.2.0-beta.6",
		"@tarojs/taro-swan": "1.2.0-beta.6",
		"@tarojs/taro-weapp": "1.2.0-beta.6",
		"babel-regenerator-runtime": "^6.5.0",
		"mobx": "^5.6.0",
		"nervjs": "^1.3.5",
		"taro-ui": "^1.4.0",
		"tslint": "^5.11.0",
		"tslint-react": "^3.6.0",
		"typescript-eslint-parser": "^21.0.1"
	"devDependencies": {
		"@tarojs/plugin-babel": "1.2.0-beta.6",
		"@tarojs/plugin-csso": "1.2.0-beta.6",
		"@tarojs/plugin-sass": "1.2.0-beta.6",
		"@tarojs/plugin-uglifyjs": "1.2.0-beta.6",
		"@tarojs/webpack-runner": "1.2.0-beta.6",
		"@types/react": "^16.4.6",
		"@types/webpack-env": "^1.13.6",
		"babel-eslint": "^8.2.3",
		"babel-plugin-transform-class-properties": "^6.24.1",
		"babel-plugin-transform-decorators-legacy": "^1.3.4",
		"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
		"babel-plugin-transform-object-rest-spread": "^6.26.0",
		"babel-preset-env": "^1.6.1",
		"eslint": "^4.19.1",
		"eslint-config-taro": "1.2.0-beta.6",
		"eslint-plugin-import": "^2.12.0",
		"eslint-plugin-react": "^7.8.2",
		"eslint-plugin-taro": "1.2.0-beta.6",
		"eslint-plugin-typescript": "^0.12.0",
		"typescript": "^3.0.1"
          
    Hello~
    

    您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。
    

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

    Good luck and happy coding~
    
          
    @wokill 首先请原谅我没有及时查看 hotmail 导致延迟了如此之久。
    

    问题出在 login.ts 中的 componentWillMount，你是这样写的：
    

    async componentWillMount() {
    if (super.componentWillMount && lifecycle === LIFE_CYCLE_MAP[0]) {
        const res = await this.autoLogin()
        if (!res) return
    super.componentWillMount && super.componentWillMount()

    只要如下修改就可以了：
    

    async componentWillMount() {
    super.componentWillMount && super.componentWillMount()
    if (super.componentWillMount && lifecycle === LIFE_CYCLE_MAP[0]) {
        const res = await this.autoLogin()
        if (!res) return
     
    推荐文章
    欢快的南瓜  ·  HTTP请求示例--AI中台公用文档-火山引擎
    1 周前
    睿智的钢笔  ·  博导、硕导——王海燕教授-陕西科技大学电子信息与人工智能学院
    1 月前
    狂野的毛豆  ·  大和是凯多的儿子还是女儿– 快看漫画问答
    3 月前
    潇洒的企鹅  ·  天津煎饼和山东煎饼的核心工艺区别是什么？ - 知乎
    1 年前
    路过的皮带  ·  BTS - Strategy Made Personal
    1 年前
    一直单身的桔子  ·  柴可夫斯基作品精选集锦| 数字音乐厅
    1 年前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南