taro框架百度小程序路由进入某一页面时出现白屏现象的可能原因

taro中render jsx语法 render过程中使用setState 操作  在安卓真机（百度app 和微信app）和 (安卓，ios)远程调试（模拟器）都没问题，也不会出现白屏，会正常显示跳转页面内容， 只有ios真机（百度app开发环境）和百度小程序预览模式（模拟器）会不出页面 不渲染 是白页面

注意：在ios （微信app下也是正常展示） 也就是说微信环境下弱化了setState在render中的使用 安卓 ios在微信环境下能正常展示跳转页面

 

支持情况

百度小程序模拟器

    预览模式

    安卓 

    远程调试模式

    安卓，ios

微信小程序模拟器

    安卓，ios

百度app

     安卓

微信app

    安卓，ios

解决方案就是把render中的setState 更新操作放到didShow 或者didMount中

下面是详细代码片 红色部分为更新操作

import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'
import { fromJS, is} from 'immutable'
import { View, Text,Image} from '@tarojs/components'
import './cat.styl'
import chaPng from '../../images/cha_icon.png'
import {unique} from "../../common/Utils"
import FeedService from '../../common/service/FeedService'

var timer = 0;
@inject('counterStore')
@observer
export default class Cat extends Component {
  constructor(props){
    super(props);
    this.state = {
      Sort:[],
      moreSortList:[],
      x:0,
      y:0,
      hidden:true,
      flag:false,
      // flag:true
      disabled: true,
      elements:[],
      beginIndex:0
    }
  }
  componentWillMount () {
  }
  componentWillUnmount () {
   // 返回首页进行刷新操作
    //this.props.counterStore.dispatch('catCur','home')
  }
  componentDidHide() {

  }
  componentDidShow() {
    const { counterStore: { catList } } = this.props;
    const newSort = catList.slice();
    this.setState({
      Sort:newSort
    })
  }
 
  componentDidMount () {
    if (process.env.TARO_ENV === 'swan') {
      swan.setDocumentTitle && swan.setDocumentTitle({
        title: '分类-CSDN'
      });
      swan.setMetaKeywords && swan.setMetaKeywords({
        content: 'IT技术博客,IT技术问答,IT技术论坛,IT技术资讯,分类'
      });
      swan.setMetaDescription && swan.setMetaDescription({
        content: 'CSDN技术社区,实时更新行业内最新信息,其中包含了IT技术博客,IT技术问答,IT技术论坛,IT技术资讯等,查找最新最全的IT信息就上CSDN'
      });
    }

    var query = Taro.createSelectorQuery();
    var nodesRef = query.selectAll(".item");
    nodesRef.fields({
    dataset: true,
    rect:true

  },(result)=>{
      this.setState({
        elements: result
      })
      }).exec()
      FeedService.findOptList().then((data)=>{
       // 默认分类列表
       this.setState({
        moreSortList:data
       })
      }).catch((error)=>{
        console.error('error:',error)
      });
  }

  componentWillReceiveProps(nextProps){
    if(!is(fromJS(this.props), fromJS(nextProps))){
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    // console.log('!is(fromJS(this.props), fromJS(nextProps))',!is(fromJS(this.props), fromJS(nextProps)))
   // console.log('!is(fromJS(this.state),fromJS(nextState))',!is(fromJS(this.state),fromJS(nextState)))
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
  }
  handleTag(param){
    //this.handleData()
     //throttle(this.handleData,500,param).call(this)
    this.throttle(()=>{
      this.handleData(param)
    })
  }
  throttle(callback,delay=100){
    if(timer){
      return
    }
    callback();
    timer=setTimeout(()=>{
      timer=0
    },delay)

  }
  handleData(param){
    //  const that = arguments[0]
    //  const param = arguments[1]
    const that =this;
    that.state.Sort.length&&that.state.Sort.splice(that.state.Sort.findIndex(v => v.catCode === param.catCode), 1);
    let moreAry = [...that.state.moreSortList,param];
    moreAry=unique(moreAry);
    that.reSort();
       setTimeout(()=>{
    that.setState({
      moreSortList:JSON.parse(JSON.stringify(moreAry))
    })
   },0);
    that.props.counterStore.dispatch('catList',that.state.Sort);
    // 只有做删除catList操作的时候 并且在删除选项中有选中状态才让状态改变 重新更新数据
    //console.log(that.props.counterStore.catCur,'that.props.counterStore.catCur====')
    //console.log(param.catCode,'param.catCur====')
    // if(param.catCode === that.props.counterStore.catCur){
    //   that.props.counterStore.dispatch('catCur','home')
    // }
     if(that.props.counterStore.catCur!== 'home'){
      that.props.counterStore.dispatch('catCur','home')
    }
   // that.props.counterStore.dispatch('catCur','home')
    // 同时往moreSortList数组中增加内容并持久化
    // const moreAry = JSON.parse(JSON.stringify(that.state.moreSortList))
    //console.log(that.state.moreSortList,"moreSortList=====")
    Taro.setStorageSync('moreSortList',moreAry)
  }
  addTag(item){
    this.throttle(()=>{
      this.addData(item)
    })
   // throttle(this.addData,500,item).call(this)
  }
  addData(item){
    // 删除更多分类中的选项
    // 找一个当下不变的方法
   // const that = arguments[0]
   // const item = arguments[1]
   const that =this;
    that.state.moreSortList.length&&that.state.moreSortList.splice(that.state.moreSortList.findIndex(v => v.catCode === item.catCode), 1);
    Taro.setStorageSync('moreSortList',that.state.moreSortList);
    //从第二个位置插入
    that.state.Sort.splice(2,0,item);
    let sort = JSON.parse(JSON.stringify(that.state.Sort));
    sort = unique(sort);
       // 1.不render的原因:立马就把值修改了 相当于 这次和上次的值是一样的 所以不再刷新了 而增加的时候 是因为误操作了一个touchend事件 导致state变化了 还有moreSortList的变化
       // 2.baidu小程序的特殊处理 重新render的方式
      //  that.setState({
      //   Sort:sort
      // })
      setTimeout(()=>{
        that.setState({
          Sort:sort
        })
       },0);
      that.reSort();
    that.props.counterStore.dispatch('catList',this.state.Sort)
    if(that.props.counterStore.catCur!== 'home'){
      that.props.counterStore.dispatch('catCur','home')
    }
  }
  reSort(){
   this.state.Sort.map((item,index)=>{
     item.curIndex = index;
     return item
    })
  }
  longTap(e){
    e.stopPropagation();
    if((this.state.beginIndex===0 || this.state.beginIndex ===1)){
      // flag 不会变成true 下面的touchMove移动距离不会执行
      return
    }
    this.setState({
      x: e.currentTarget.offsetLeft,
      y: e.currentTarget.offsetTop,
      hidden: false,
      flag:true
    })
  }
  touchStart(item,e){
    this.setState({
      beginIndex:e.currentTarget.dataset.index
    })
  }
  flagTag(endIndex){
    return (endIndex===0 || endIndex ===1)
  }
  touchEnd(item,e){
    e.stopPropagation();
    if (!this.state.flag) {
      return;
    }
    const x = e.changedTouches[0].pageX;
    const y = e.changedTouches[0].pageY;
    const list = this.state.elements;
    let data = this.state.Sort;
    var flags =false;
    for (let i = 0; i < data.length; i++) {
      // 任何进入的都需要把虚线去掉
       data[i].chosen = 0;
       if(i === data.length-1){
         flags = true
       }
    }
    for(var j = 0; j<list.length; j++){
      const item = list[j];
      if(x>item.left && x<item.right && y>item.top && y<item.bottom){
        // 在拖动范围内的做换位操作 否则不做换位操作
        const beginIndex = this.state.beginIndex;
        const endIndex = item.dataset.index;
        //向后移动
        if(!this.flagTag(endIndex)){
          if (beginIndex < endIndex) {
            let tem = data[beginIndex];
            for (let i = beginIndex; i < endIndex; i++) {
              data[i] = data[i + 1];
              data[i].curIndex = i
            }
              // 结束位置是0或者1 不做换位操作
              data[endIndex] = tem;
              data[endIndex].curIndex = endIndex
          }
          //向前移动
          if (beginIndex > endIndex) {
            let tem = data[beginIndex];
            for (let i = beginIndex; i > endIndex; i--) {
              data[i] = data[i - 1];
              data[i].curIndex = i
            }
              // 结束位置是0或者1 不做换位操作
              data[endIndex] = tem;
              data[endIndex].curIndex = endIndex
          }
          this.props.counterStore.dispatch('catList',data)
          if(this.props.counterStore.catCur!== 'home'){
            this.props.counterStore.dispatch('catCur','home')
          }
        }

        // 替换完成flag 为true  遮罩层隐藏
        //this.props.counterStore.dispatch('catList',data)
      }

    }
    this.setState({
      flag: false,
      hidden: true
      })
    // this.props.counterStore.dispatch('catList',data)
  }
  touchMove(item,e){
    e.stopPropagation();
    if(this.state.flag){
      const x = e.touches[0].pageX;
      const y = e.touches[0].pageY;
      this.setState({
        x: x-75,
        y: y - 80
      });
     // 执行了拖拽操作的元素在拖拽过程中增加虚线框的操作
      const list = this.state.elements;
      // Sort 是第一次render时候拿到的首页的sort列表
      let data = this.state.Sort;
      for(var j = 0; j<list.length; j++){
        const item = list[j];
        if(x>item.left && x<item.right && y>item.top && y<item.bottom){

          const endIndex = item.dataset.index;
          // 如果结束位置是0 或者是1  则不增加虚线 其他情况在移动过程中给结束位增加虚线
          if(!this.flagTag(endIndex)){
            data[endIndex].chosen = 1
          }
          // 开始位置赠加虚线
         data[this.state.beginIndex].chosen = 1
        }
      }
     //this.props.counterStore.dispatch('catList',data)
    }
  }

  render () {
    const { counterStore: { catList } } = this.props;
    const newSort = catList.slice();
    const {moreSortList} = this.state;
  
     //const newSort = Taro.getStorageSync('catList')
     // 不通过props刷新更新数据 优化页面渲染速度
    // this.setState({
    //   Sort:newSort
    // });
    const cardItem = newSort.map((item,index)=>{
      return <View   key={item.curIndex} data-index={item.curIndex}   onLongPress={this.longTap} onTouchStart={this.touchStart.bind(this,item)} onTouchMove={this.touchMove.bind(this,item)} onTouchEnd={this.touchEnd.bind(this,item)} className={`item ${item.chosen?'dash':''}`}>
      <View>{`${item.catName}`}</View>

      {index>1&&<Image src={chaPng} className='close' onClick={this.handleTag.bind(this,item)}></Image>}
        </View>
    });

    const cardItem2 = moreSortList.length&&moreSortList.map((item,index)=>{
      return <View className='item' key={item.curIndex} onClick={this.addTag.bind(this,item)}>
      <View className='nr'><Text>+</Text><Text>{item.catName}</Text></View>
      </View>
    });
    return (
      <View className='sort'>
       <View className='my_sort'>
       <View className='block'>
         <View className='line'></View>
        <Text className='title' >常用分类</Text>
        <Text className='tip'>点击可删除分类</Text>
        </View>
     <View className='drag'>
     <movableArea>
     <View  className='drags'>
        {cardItem}
     </View>
      <movableView x={this.state.x} y={this.state.y} direction='all' damping='6000' friction='500' disabled={this.state.disabled} inertia='false'>
        <View className='item-move' hidden={this.state.hidden}>
        {this.state.Sort.length&&this.state.Sort[this.state.beginIndex]&&this.state.Sort[this.state.beginIndex].catName}
        </View>
      </movableView>
      </movableArea>
      </View>
      </View>
      <View className='more_sort'>
      <View className='line'></View>
      <View className='block'>
         <View className='line'></View>
        <Text className='title' >可选分类</Text>
        <Text className='tip'>点击可添加</Text>
        </View>
        {moreSortList.length&&  <View  className='drag'>
        {cardItem2}
        </View>}
      </View>
      </View>
    )
  }
}