Vue/React 坑收藏

Vue BUG记录

1、自定义组件的slot绑定点击方法，触发事件混乱

//自定义弹窗子组件

//父级引用

期望点击“测试”按钮，只执行ddd()方法，但是奇葩表现是：点“测试”不仅执行了ddd() 还触发了onCancel；点“测试1”不仅执行了ddd() 还触发了onOk；点“测试2”只执行了ddd() ；
为什么父级slot绑定的方法会触发到自定义组件中的其他方法···
然后我用mpvue2.0版本测试，也是同样的问题
但是我用vue测试，没问题···
mpvue坑还是很多的 导致官方都更不下去了 233333

解决方法： 子组件两个@tap改成@touchstart，也可以用@ touchend，这只能暂时解决绑定事件的问题，组件再复杂点就不行了。

其实这里面还有一个问题 slot内容中如果绑定了父组件的状态，状态改变时，slot是不会跟着渲染的··· 这个问题的处理方法点这里。但是！渲染可以了，动态改变还是不行

参考：slot中组件数据无法渲染 #409、组件嵌套slot问题 #427

最后，我决定不用slot了 辣子鸡里面全是辣鸡

2、mpvue的computed不能正常渲染

正常vue可以通过computed传参的方式 渲染不同内容 如：

  {{getTheData(item.val)}}


computed: {
  getTheData() {
    return function(name){
        console.log(name, this[`${name}`])
        return this[`${name}`];    
    }           
  } 
}

但是在mpvue中执行以上代码，console正常，但是页面渲染没有内容！什么！
所以只能迂回了 真滴是操碎了心

  {{getTheData[index].name}}


computed: {
  getTheData() {
    let _this = this
    let result = [];
    _this.list.map(res => {
      result.push(_this[`${res.val}`])
    })
    return result;
  }
}

辣子鸡里面全是辣鸡

3、封装input用了v-model就不能用动态type

上面这样写报错：v-model does not support dynamic input types. Use v-if branches instead.
意思就是用了v-model就不能用动态的type，只能用v-if代替

4、mpvue同一组件再一个页面被多次调用，slot渲染出错

像上面这样同一组件被调用多次，slot内容就不对了，用具名slot分发也不行，只调用1个是正常的。奇葩的是，我重新编译一下显示就没问题了。。。。。。 但是！如果要在slot内容中绑定data，还是不行！也就是只能显示

111

这种，不能显示

{{val}}

这种。 反正老项目，也不想浪费时间纠结了，第二个就不用组件了。 哎~ react真香！

Taro 问题记录

1、自定义组件createSelectorQuery获取不到元素

const query = this.interface.createSelectorQuery()
query.select('#dom-id').boundingClientRect((res) => {
  console.log('info', res)   //res为null
}).exec()

const query = this.interface.createSelectorQuery().in(this)
query.select('#dom-id').boundingClientRect((res) => {
  console.log('info', res)
}).exec()
/**
没有console，系统报警告:
An SelectorQuery call is ignored because no proper page or component is found. Please considering using `SelectorQuery.in` to specify a proper one.
意思是因为找不到页面或组件，所以请求被忽略了
**/

正确写法：

const query = this.interface.createSelectorQuery().in(this.$scope)
query.select('#dom-id').boundingClientRect((res) => {
  console.log('info', res)
}).exec()

React 问题记录

1、reverse后遍历，总会出错

//根据给定的数字判断属于哪个区间
let arr = [
    { name: '学徒', value: 0 },
    { name: '1-3年', value: 1 },
    { name: '3-5年', value: 3 },
    { name: '5-10年', value: 5 },
    { name: '10-15年', value: 10 },
    { name: '15年以上', value: 15 }
]
private findName = e =>{
    let result = arr.reverse().find(res => res.value <= e)
    return result? result.name : ''
}

2、微信小程序 支付完成后，从系统支付成功页返回，显示feedback组件失效

    const res = await this.interface.requestPayment(response.body);

    if (res.errMsg !== 'requestPayment:ok') {
      return;
    }

    let that= this
    setTimeout(() => {
      //安卓，支付页面返回后，第一时间显示会无效。。。。。加个延时就好了。。。。
      //可能是需要dom渲染的原因？
      that.feedback.showFeedback('giftAlert')
    },500)
    
    this.feedback.showToast('充值成功');  //这个是可以正常触发的

3、A页面执行setTimeout，中途切页面后，setTimeout会继续执行，但是里面的this方法无效

  private handleShowPullDownNoticebar = () => {
      this.setState({
        showPulldownNoticebar: true
      })
  }

  private hidePullDownNoticebar = () => {
    this.setState({
      showPulldownNoticebar: false
    })
    
    setTimeout(() => {
      console.log("timeout")  //可以正常console;
      this.handleShowPullDownNoticebar()  //跳页后不执行
      //feedbackObservable.trigger('showIndexPulldownNotice', 1)  //迂回
    }, 8000)
  }

因为切换页面后，A页面组件已经被销毁，定时器虽然会正常执行，但其中的方法执行的时候已经是不存在了。
解决方法：可以迂回一下，使用发布订阅trigger一下

4、使用antDesign Pro时，自定义了一个组件，使用Link报错

报错：Uncaught Error: Invariant failed: You should not use outside a
Link外面要有BrowserRouter包裹

import Link from 'umi/link';
import { BrowserRouter, Route } from 'react-router-dom';


  跳转

5、使用input上传文件时，onChange拿不到内容

private handleFileChange = e => {
  console.log(e)  //直接这样写，拿到的e没有target等内容
}

private handleFileChange = e => {
  e.persist()    //要加这个东西
  console.log(e)  //正常
}

6、react-app iphone打开H5页面空白

问题描述：一个react开发的H5页面，页面加了一些正则匹配，打包后安卓、PC打开都正常。但是iphone上不论微信端还是浏览器，页面打开都是空白，title内容都没有。而且这种情况根本不能用vconsole调试。所以只能用safari内置开发功能连接mac调试，调试发现控制台报错SyntaxError: Invalid regular expression: invalid group specifier name
百度查到：如果正则表达式中包含零宽断言的话 , 在安卓手机上正常 , 但是在ios上会报以下错误；常用零宽断言：?<=、?;
我代码中使用了rep = rep.replace(/(? 这样的写法；NO！！！
要改成rep = rep.replace(new RegExp("(? 这样才OK！！

7、打包报错

TypeError: ctx.modifyWebpackChain is not a function
检查发现是@tarojs/plugin-stylus跟当前taro/cli版本不一致，安装对应版本就行了

别的坑记录

1、配置目录别名正确，但编辑器报错

配置目录别名时，tsconfig.json里正确配置了path，但编辑器还是显示引用错误。
重启编辑器就好··· PS：我用的VS Code

2、decodeURI无效，但复制测试没问题

从接口获取了一个unicode，需要转换成中文。但是接口获取的unicode字符串代入下面方法后，并不能转换成中文。
这是接口返回数据：{name: "\u4e2d\u56fd", price: 1000, status: 1}，取其中的name直接代入decodeURI转换失败！
但是通过复制接口返回的unicode字符串，然后进行测试，是可以正常转换的。。。目测应该是有转义问题，可这种问题肉眼实在是看不出来啊

private getDecodeUri = (str) => {
    console.log('decodeURI:', str, decodeURI(str))   //如果str是接口获取的，控制台打印无效；
    console.log('test: ', '\u4e2d\u56fd', decodeURI('\u4e2d\u56fd'))  //控制台打印有效
    return decodeURI(str) 
}

然后网上找到一个偏方，下面这样就可以了！！！？？？

private getDecodeUri = (str) => {
    let test = JSON.stringify(str)
    test = test.replace(/\\\\/g, '\\')
    return JSON.parse(test)
}

Taro3体验记录

1、每个页面必须要import React from 'react'

2、子组件不会触发onReady, onShow, onHide