NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.5k stars 4.79k forks source link

转react出现些错误 #1576

Closed mienv567 closed 5 years ago

mienv567 commented 5 years ago

操作系统 win taro版本 1.2.0 正式版 node v10.14 npm 6.4.1 taro 代码

import { Block, View, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './login.scss'
var api = require('../../utils/api.js')

var app = Taro.getApp()

@withWeapp('Page')
class _C extends Taro.Component {
  state = {
    viewHeight: 0,
    seconds: 60,
    phone: '',
    ticket: '',
    code: '',
    codeDesc: '获取验证码',
    hasGetCode: false,
    redirect: false
  }

  componentDidShow() {
    var mockDndService = this
    if (!app.globalData.isAllow) {
      Taro.navigateTo({
        url: '../authorization/authorization'
      })
    }
    Taro.getSystemInfo({
      success: function(data) {
        mockDndService.setData({
          viewHeight: data.windowHeight
        })
      }
    })
  }

  componentWillMount(data) {
    if (data) {
      this.setData(data)
    }
  }

  login = callback => {
    var req = this
    if (req.data.hasGetCode && req.data.code) {
      var isPhone = req.data.phone
      var ticket = req.data.ticket
      var scriptCode = req.data.code
      var redirect = req.data.redirect
      app.getUserInfo(function(userInfo) {
        var data = {
          phone: isPhone,
          ticket: ticket,
          code: scriptCode
        }
        if ('unionId' in userInfo) {
          /** @type {number} */
          data.typeId = 66
          data.udid = userInfo.unionId
        } else {
          /** @type {number} */
          data.typeId = 72
          data.udid = userInfo.openId
        }
        /** @type {string} */
        var id = api.baseUrl + 'account/ease_login'
        api
          .fetchPost(id, data)
          .then(function(user) {
            if ((app.setUserInfo(user), api.setToken(user.tok), redirect)) {
              if ('index' == redirect) {
                Taro.switchTab({
                  url: '../index/index'
                })
              } else {
                if ('myQuestion' == redirect) {
                  Taro.switchTab({
                    url: '../myQuestion/index'
                  })
                } else {
                  /** @type {string} */
                  var reqUrl = decodeURIComponent(redirect)
                  Taro.redirectTo({
                    url: reqUrl
                  })
                }
              }
            } else {
              Taro.navigateBack({
                delta: 1
              })
            }
          })
          .catch(function(canCreateDiscussions) {})
      })
    }
  }
  settime = t => {
    var allTraps = this
    if (t <= 0) {
      this.setData({
        codeDesc: '获取验证码'
      })
    } else {
      /** @type {number} */
      t = t - 1
      this.setData({
        codeDesc: t
      })
      setTimeout(function() {
        allTraps.settime(t)
      }, 1e3)
    }
  }
  bindKeyInput = e => {
    this.setData({
      phone: e.detail.value
    })
  }
  bindCodeInput = p => {
    this.setData({
      code: p.detail.value
    })
  }
  getCode = () => {
    var lambdaEvent = this
    if ('获取验证码' == lambdaEvent.data.codeDesc) {
      var phone = lambdaEvent.data.phone
      if (/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(phone)) {
        this.sendCode(phone)
        this.settime(60)
      }
    }
  }
  sendCode = type => {
    var res = this
    var data = {
      phone: type,
      type: 5
    }
    /** @type {string} */
    var id = api.baseUrl + 'account/send_verify_code'
    api
      .fetchPost(id, data)
      .then(function(project) {
        res.setData({
          hasGetCode: true,
          ticket: project.ticket
        })
      })
      .catch(function(canCreateDiscussions) {})
  }
  showLoading = () => {
    Taro.showToast({
      title: '加载...',
      icon: 'loading',
      duration: 200
    })
  }
  bindGetUserInfo = () => {}
  config = {
    navigationBarTitleText: '手机号验证',
    navigationBarTextStyle: 'black',
    navigationBarBackgroundColor: '#FFF',
    enablePullDownRefresh: false
  }

  render() {
    const {
      codeDesc: codeDesc,
      hasGetCode: hasGetCode,
      code: code,
      opacity: opacity
    } = this.state
    return (
      <Block>
        <View className="login">
          <View className="phone-item" style="padding-right: 0;">
            <View className="labels">手机号</View>
            <Input
              onNput={this.bindKeyInput}
              className="input"
              maxlength="11"
              placeholder="\u8F93\u5165\u624B\u673A\u53F7"
              placeholderClass="placeholder"
              type="number"
            />
            <View disabled onClick={this.getCode} className="get-code">
              {codeDesc}
            </View>
          </View>
          <View className="code-item">
            <View className="labels">验证码</View>
            <Input
              onNput={this.bindCodeInput}
              className="input"
              placeholder="\u8F93\u5165\u9A8C\u8BC1\u7801"
              placeholderClass="placeholder"
              type="number"
            />
          </View>
          <View className="tips">
            根据国家政策,首次注册的用户需完成绑定手机号操作,下次进入可直接通过微信授权自动登录。
          </View>
        </View>
        <View
          onClick={this.login}
          className={hasGetCode && code.length > 0 ? 'button' : 'button1'}
          style={'opacity: ' + opacity}
        >
          绑 定
        </View>
      </Block>
    )
  }
}

export default _C

错误信息太多 截取一部分

(node:8856) UnhandledPromiseRejectionWarning: TypeError: unknown: Cannot read pr
operty 'type' of undefined
    at PluginPass.JSXOpeningElement (C:\Users\Administrator\AppData\Roaming\npm\
node_modules\@tarojs\cli\node_modules\babel-plugin-transform-jsx-to-stylesheet\s
rc\index.js:193:45)
    at newFn (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cl
i\node_modules\babel-traverse\lib\visitors.js:276:21)
    at NodePath._call (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@
tarojs\cli\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@t
arojs\cli\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@
tarojs\cli\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (C:\Users\Administrator\AppData\Roaming\npm\n
ode_modules\@tarojs\cli\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (C:\Users\Administrator\AppData\Roaming\npm\
node_modules\@tarojs\cli\node_modules\babel-traverse\lib\context.js:108:19)
    at TraversalContext.visit (C:\Users\Administrator\AppData\Roaming\npm\node_m
odules\@tarojs\cli\node_modules\babel-traverse\lib\context.js:192:19)
    at Function.traverse.node (C:\Users\Administrator\AppData\Roaming\npm\node_m
odules\@tarojs\cli\node_modules\babel-traverse\lib\index.js:114:17)
    at NodePath.visit (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@
tarojs\cli\node_modules\babel-traverse\lib\path\context.js:115:19)
(node:8856) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This
error originated either by throwing inside of an async function without a catch
block, or by rejecting a promise which was not handled with .catch(). (rejection
 id: 1)
(node:8856) [DEP0018] DeprecationWarning: Unhandled promise rejections are depre
cated. In the future, promise rejections that are not handled will terminate the
 Node.js process with a non-zero exit code.
(node:8856) UnhandledPromiseRejectionWarning: TypeError: unknown: Cannot read pr
operty 'type' of undefined

是不是view block部分问题 测试去掉js render中的renturn标签即正常 render() { ........ return (

return里面有问题 taro convert 转换后的pages文件夹js 继续转换成rn。多个pages文件夹下的代码不生成,去掉 return(里面的所有标签就正常生成
taro-bot[bot] commented 5 years ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

yuche commented 5 years ago

大哥,你没说你的问题是啥啊。我都不知道你要表达什么意思

mienv567 commented 5 years ago

大哥,你没说你的问题是啥啊。我都不知道你要表达什么意思

已修改问题,就是taro转换的 模版标签可能有问题,小程序 h5下无问题

yuche commented 5 years ago

是转出来了 taro 代码,但是运行 taro build 命令出了问题了吗

mienv567 commented 5 years ago

是转出来了 taro 代码,但是运行 taro build 命令出了问题了吗

是的 npm run dev:rn 的时候排除css外,pages下的js文件部分没有被编译到.rn_temp里。只成功一小部分,我去掉例如 login.js里面的 render() { ........ return ( 这里面的内容为空后就会编译写入到 .rn_temp )

taro-bot[bot] commented 5 years ago

CC @Pines-Cheng

Pines-Cheng commented 5 years ago

编译的时候控制台有报错吧?@mienv567

mienv567 commented 5 years ago

编译的时候控制台有报错吧?@mienv567

有报错信息已经贴出看 https://github.com/NervJS/taro/issues/1576#issue-392175158 里面最下面有我发的部分报错信息. 我去掉例如 login.js里面的 render() { ........ return ( 这里面的内容为空后就会编译写入到 .rn_temp )没有任何报错

Pines-Cheng commented 5 years ago

应该是这里导致的:style="padding-right: 0;"

改成 style={{paddingRight: 0}} RN 端就 OK 了,不过还是不推荐这种写法。

mienv567 commented 5 years ago

应该是这里导致的:style="padding-right: 0;"

改成 style={{paddingRight: 0}} RN 端就 OK 了,不过还是不推荐这种写法。

谢谢我试试.

mienv567 commented 5 years ago

应该是这里导致的:style="padding-right: 0;"

改成 style={{paddingRight: 0}} RN 端就 OK 了,不过还是不推荐这种写法。

谢谢已经修复,希望以后可以把报错信息能够识别代码位置。