yarn dev:rn 时报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

zhangjie1314 · 2019-01-02T06:29:23Z

问题描述
运行 dev:rn 时出现如题报错

报错信息

TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params')

This error is located at:
    in _C (at getWrappedScreen.js:165)
    in RCTScrollContentView (at ScrollView.js:791)
    in RCTScrollView (at ScrollView.js:887)
    in ScrollView (at RefreshProvider.js:18)
    in RefreshProvider (at TaroProvider.js:132)
    in TaroProvider (at getWrappedScreen.js:156)
    in WrappedScreen (at SceneView.js:9)
    in SceneView (at StackViewLayout.js:483)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:42)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:507)
    in RCTView (at View.js:60)
    in View (at screens.native.js:83)
    in ScreenContainer (at StackViewLayout.js:401)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:400)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:49)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:141)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:57)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at app.js:21)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at index.js:33)
    in RootSiblingsWrapper (at AppContainer.js:119)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at app.js:21)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at index.js:33)
    in RootSiblingsWrapper (at AppContainer.js:119)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)
- node_modules/@tarojs/with-weapp/dist/index.js:2715:86 in componentWillMount
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:6698:6 in callComponentWillMount
- ... 19 more stack frames from framework internals

系统信息

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

Taro CLI 1.2.3 environment info:
    System:
      OS: macOS 10.14.2
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.4.0 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 1.2.3 => 1.2.3 
      @tarojs/plugin-babel: 1.2.3 => 1.2.3 
      @tarojs/plugin-csso: 1.2.3 => 1.2.3 
      @tarojs/plugin-sass: ^1.2.3 => 1.2.3 
      @tarojs/plugin-uglifyjs: 1.2.3 => 1.2.3 
      @tarojs/rn-runner: ^1.2.3 => 1.2.3 
      @tarojs/router: 1.2.3 => 1.2.3 
      @tarojs/taro: 1.2.3 => 1.2.3 
      @tarojs/taro-alipay: 1.2.3 => 1.2.3 
      @tarojs/taro-h5: 1.2.3 => 1.2.3 
      @tarojs/taro-swan: 1.2.3 => 1.2.3 
      @tarojs/taro-weapp: 1.2.3 => 1.2.3 
      @tarojs/webpack-runner: 1.2.3 => 1.2.3 
      eslint-config-taro: 1.2.3 => 1.2.3 
      eslint-plugin-taro: 1.2.3 => 1.2.3

The text was updated successfully, but these errors were encountered:

taro-bot · 2019-01-02T06:29:25Z

欢迎提交 Issue~

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

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

Good luck and happy coding~

taro-bot · 2019-01-02T07:34:03Z

CC @Pines-Cheng

Pines-Cheng · 2019-01-02T12:57:56Z

请问一下怎么重现？我这里重现不了。

zhangjie1314 · 2019-01-03T01:25:33Z

请问一下怎么重现？我这里重现不了。

我是先把小程序代码转换成taro代码，然后把所有页面全部删掉只留首页相关的代码，然后运行 yarn dev:rn 就出现了这个错误

zhangjie1314 · 2019-01-03T01:27:17Z

我代码里边也没有使用

this.$router.params

获取路由参数

Pines-Cheng · 2019-01-04T01:01:10Z

方便贴一下首页代码吗？@zhangjie1314

zhangjie1314 · 2019-01-04T01:28:52Z

方便贴一下首页代码吗？@zhangjie1314

这是转换成rn后的 app.js

var _class, _temp;

import TaroRouter from '@tarojs/taro-router-rn';
import pagesCvFailIndex from './pages/cv-fail/index';
import pagesCvSuccessIndex from './pages/cv-success/index';
import pagesIntegralOrderListIndex from './pages/integral-order-list/index';
import pagesTicketOrderListIndex from './pages/ticket-order-list/index';
import pagesInputVcodeIndex from './pages/input-vcode/index';
import pagesForgetPasswordIndex from './pages/forget-password/index';
import pagesIndexIndex from './pages/index/index';
import pagesLoginIndex from './pages/login/index';
import Taro from '@tarojs/taro-rn';
import React from 'react';

import appStyleSheet from "./app_styles";

var _styleSheet = appStyleSheet;
let App = (_temp = _class = class App extends React.Component {

  // componentWillMount() {
  //   this.$app.globalData = this.globalData
  // }

  render() {
    return <RootStack />;
  }
}, _class.config = {
  // subPackages: [
  //   {
  //     root: 'packages/store',
  //     pages: [
  //       'index/index',
  //       'cv-success/index',
  //       'cv-fail/index',
  //       'order-list/index',
  //       'input-vcode/index'
  //     ]
  //   }
  // ],
  window: {
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '商务服务平台',
    navigationBarTextStyle: 'black'
  } }, _temp); //app.js

export default App;
const RootStack = TaroRouter.initRouter([['pages/login/index', pagesLoginIndex], ['pages/index/index', pagesIndexIndex], ['pages/forget-password/index', pagesForgetPasswordIndex], ['pages/input-vcode/index', pagesInputVcodeIndex], ['pages/ticket-order-list/index', pagesTicketOrderListIndex], ['pages/integral-order-list/index', pagesIntegralOrderListIndex], ['pages/cv-success/index', pagesCvSuccessIndex], ['pages/cv-fail/index', pagesCvFailIndex]], Taro, App.config);
Taro.initNativeApi(Taro);
Taro.initPxTransform({
  "designWidth": 750,
  "deviceRatio": {
    "640": 1.17,
    "750": 1,
    "828": 0.905
  }
});

这是转换成rn后的首页

var _dec, _class, _class2, _temp2;

import Taro from '@tarojs/taro-rn';
import { Block, View, Form, RadioGroup, Radio, Input, Navigator, Button } from "@tarojs/components-rn";
import React from 'react';

import withWeapp from '@tarojs/with-weapp';
// pages/login/index.js
import _ from '../../utils/util.js';
import Apis from '../../utils/apis.js';

import indexStyleSheet from "./index_styles";

var _styleSheet = indexStyleSheet;

let _C = (_dec = withWeapp('Page'), _dec(_class = (_temp2 = _class2 = class _C extends React.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      platformArr: [{ value: 1, text: '景区', selected: true }, { value: 2, text: '商户', selected: false }], // 可选平台数据
      curSelectedPlatform: 1 // 当前选中的平台
    }, this.loginFun = e => {
      let params = {
        u: e.detail.value.user_name,
        p: e.detail.value.password
      };
      let url = '';
      if (this.data.curSelectedPlatform == 1) {
        url = Apis.login;
      } else {
        url = Apis.storeLogin;
      }
      _.request(url, 'post', params).then(res => {
        // 本地保存登录信息
        Taro.setStorageSync('userInfo', res.data);
        // 跳转去首页
        if (this.data.curSelectedPlatform == 1) {
          // 跳转景区管理首页
          Taro.redirectTo({
            url: '../index/index'
          });
        } else {
          // 跳转商户管理首页
          Taro.redirectTo({
            url: '/packages/store/index/index'
          });
        }
      });
    }, this.selectionPlatformFun = e => {
      this.setData({
        curSelectedPlatform: e.detail.value
      });
    }, this.onShareAppMessage = () => {
      return {
        title: '智慧景区服务平台',
        imageUrl: 'https://scenic.tuliyou.com/static/images/scenic_server_share_img.jpeg'
      };
    }, _temp;
  }

  componentWillMount() {
    const userInfo = Taro.getStorageSync('userInfo');
    // 检测是否登录
    if (userInfo) {
      // 检测登录信息是否为景区管理员登录
      if (userInfo.sid) {
        // 跳转景区管理首页
        Taro.redirectTo({
          url: 'pages/index/index'
        });
      } else {
        // 跳转商户管理首页
        Taro.redirectTo({
          url: '/packages/store/index/index'
        });
      }
    }
  }

  render() {
    const {
      platformArr: platformArr,
      curSelectedPlatform: curSelectedPlatform
    } = this.state;
    return <Block>
        {}
        <View style={_styleSheet["login-box"]}>
          <View style={_styleSheet["title"]}>景区商务服务平台</View>
          <Form onSubmit={this.loginFun}>
            <View style={_styleSheet["selection-platform"]}>
              <RadioGroup onChange={this.selectionPlatformFun}>
                {platformArr.map((item, index) => {
                return <Radio value={item.value} checked={item.selected} key="index" color="#229fff" style={_styleSheet["radio"]}>
                      {item.text}
                    </Radio>;
              })}
              </RadioGroup>
            </View>
            <Input type="text" placeholder="用户名" placeholderClass="place-style" name="user_name" />
            <Input type="password" placeholder="密码" placeholderClass="place-style" name="password" />
            <View style={_styleSheet["small-btn-box"]}>
              {curSelectedPlatform == 1 && <Navigator openType="navigate" url="../forget-password/index" style={_styleSheet["forget-password"]}>
                  忘记密码？
                </Navigator>}
            </View>
            <View style={_styleSheet["btn-box"]}>
              <Button formType="submit" style={_styleSheet["login-brn"]}>
                登录
              </Button>
            </View>
          </Form>
        </View>
      </Block>;
  }
}, _class2.config = {}, _temp2)) || _class);

export default _C;

@Pines-Cheng

Pines-Cheng · 2019-01-07T07:40:16Z

@zhangjie1314 我指的是转换前的代码哦～

zhangjie1314 · 2019-01-07T08:28:15Z

@zhangjie1314 我指的是转换前的代码哦～

import {
  Block,
  View,
  Form,
  RadioGroup,
  Radio,
  Input,
  Navigator,
  Button
} from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
// pages/login/index.js
import _ from '../../utils/util.js'
import Apis from '../../utils/apis.js'

import './index.scss'

@withWeapp('Page')
class _C extends Taro.Component {
  state = {
    platformArr: [
      { value: 1, text: '景区', selected: true },
      { value: 2, text: '商户', selected: false }
    ], // 可选平台数据
    curSelectedPlatform: 1 // 当前选中的平台
  }

  componentWillMount() {
    const userInfo = Taro.getStorageSync('userInfo')
    // 检测是否登录
    if (userInfo) {
      // 检测登录信息是否为景区管理员登录
      if (userInfo.sid) {
        // 跳转景区管理首页
        Taro.redirectTo({
          url: '../index/index'
        })
      } else {
        // 跳转商户管理首页
        Taro.redirectTo({
          url: '/packages/store/index/index'
        })
      }
    }
  }

  loginFun = e => {
    let params = {
      u: e.detail.value.user_name,
      p: e.detail.value.password
    }
    let url = ''
    if (this.data.curSelectedPlatform == 1) {
      url = Apis.login
    } else {
      url = Apis.storeLogin
    }
    _.request(url, 'post', params).then(res => {
      // 本地保存登录信息
      Taro.setStorageSync('userInfo', res.data)
      // 跳转去首页
      if (this.data.curSelectedPlatform == 1) {
        // 跳转景区管理首页
        Taro.redirectTo({
          url: '../index/index'
        })
      } else {
        // 跳转商户管理首页
        Taro.redirectTo({
          url: '/packages/store/index/index'
        })
      }
    })
  }
  selectionPlatformFun = e => {
    this.setData({
      curSelectedPlatform: e.detail.value
    })
  }
  onShareAppMessage = () => {
    return {
      title: '智慧景区服务平台',
      imageUrl:
        'https://scenic.tuliyou.com/static/images/scenic_server_share_img.jpeg'
    }
  }
  config = {}

  render() {
    const {
      platformArr: platformArr,
      curSelectedPlatform: curSelectedPlatform
    } = this.state
    return (
      <Block>
        {/* pages/login/index.wxml */}
        <View className="login-box">
          <View className="title">景区商务服务平台</View>
          <Form onSubmit={this.loginFun}>
            <View className="selection-platform">
              <RadioGroup onChange={this.selectionPlatformFun}>
                {platformArr.map((item, index) => {
                  return (
                    <Radio
                      className="radio"
                      value={item.value}
                      checked={item.selected}
                      key="index"
                      color="#229fff"
                    >
                      {item.text}
                    </Radio>
                  )
                })}
              </RadioGroup>
            </View>
            <Input
              type="text"
              placeholder="用户名"
              placeholderClass="place-style"
              name="user_name"
            />
            <Input
              type="password"
              placeholder="密码"
              placeholderClass="place-style"
              name="password"
            />
            <View className="small-btn-box">
              {curSelectedPlatform == 1 && (
                <Navigator
                  openType="navigate"
                  url="../forget-password/index"
                  className="forget-password"
                >
                  忘记密码？
                </Navigator>
              )}
            </View>
            <View className="btn-box">
              <Button formType="submit" className="login-brn">
                登录
              </Button>
            </View>
          </Form>
        </View>
      </Block>
    )
  }
}

export default _C

@Pines-Cheng

zhangjie1314 · 2019-01-07T08:28:47Z

这个是首页的

zhangjie1314 · 2019-01-07T08:29:56Z

这个是 app.js 的

import Taro from '@tarojs/taro'
import './app.scss'

class App extends Taro.Component {
  config = {
    pages: [
      'pages/login/index',
      'pages/index/index',
      'pages/forget-password/index',
      'pages/input-vcode/index',
      'pages/ticket-order-list/index',
      'pages/integral-order-list/index',
      'pages/cv-success/index',
      'pages/cv-fail/index'
    ],
    // subPackages: [
    //   {
    //     root: 'packages/store',
    //     pages: [
    //       'index/index',
    //       'cv-success/index',
    //       'cv-fail/index',
    //       'order-list/index',
    //       'input-vcode/index'
    //     ]
    //   }
    // ],
    window: {
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '商务服务平台',
      navigationBarTextStyle: 'black'
    }
  }

  // componentWillMount() {
  //   this.$app.globalData = this.globalData
  // }

  render() {
    return null
  }
} //app.js

export default App
Taro.render(<App />, document.getElementById('app'))

Pines-Cheng · 2019-01-07T10:36:21Z

好的，非常感谢～🙏

Pines-Cheng · 2019-01-07T12:42:33Z

原因已找到，@withWeapp 装饰器导致的，正在修复。

zhangjie1314 · 2019-01-07T12:43:37Z

好的

luckyadam added the React Native label Jan 2, 2019

taro-bot bot assigned Pines-Cheng Jan 2, 2019

taro-bot bot mentioned this issue Jan 5, 2019

项目周报 (2018 年 12 月 29 日 - 2019 年 1 月 5 日) #1818

Closed

Pines-Cheng closed this as completed in f10b764 Jan 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

yarn dev:rn 时报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

yarn dev:rn 时报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

zhangjie1314 commented Jan 2, 2019

taro-bot bot commented Jan 2, 2019

taro-bot bot commented Jan 2, 2019

Pines-Cheng commented Jan 2, 2019

zhangjie1314 commented Jan 3, 2019

zhangjie1314 commented Jan 3, 2019 •

edited

Loading

Pines-Cheng commented Jan 4, 2019

zhangjie1314 commented Jan 4, 2019

Pines-Cheng commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

Pines-Cheng commented Jan 7, 2019

Pines-Cheng commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

yarn dev:rn 时 报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

yarn dev:rn 时 报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

Comments

zhangjie1314 commented Jan 2, 2019

taro-bot bot commented Jan 2, 2019

taro-bot bot commented Jan 2, 2019

Pines-Cheng commented Jan 2, 2019

zhangjie1314 commented Jan 3, 2019

zhangjie1314 commented Jan 3, 2019 • edited Loading

Pines-Cheng commented Jan 4, 2019

zhangjie1314 commented Jan 4, 2019

Pines-Cheng commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

Pines-Cheng commented Jan 7, 2019

Pines-Cheng commented Jan 7, 2019

zhangjie1314 commented Jan 7, 2019

yarn dev:rn 时报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

yarn dev:rn 时报错 TypeError: TypeError: undefined is not an object (evaluating 'this.$router.params') #1779

zhangjie1314 commented Jan 3, 2019 •

edited

Loading