taro 二级页面使用state导致一二级页面全为空白页(无任何报错提示)

eivgtgni  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(43)

相关平台

微信小程序

小程序基础库: 8.0.32
使用框架: React

复现步骤

taro框架react hooks,在首页写了state,详情页也写了state,首页用的Taro.navigateTo跳转到详情页,编译到微信小程序端,此时两个页面都为空白页,啥内容也没有了,然后我把详情页的useState删掉,两个页面就都恢复正常了

期望结果

在首页写了state,详情页也写了state,两个页面都正常显示

实际结果

两个页面都为空白页

环境信息

👽 Taro v3.6.5

  Taro CLI 3.6.5 environment info:
    System:
      OS: macOS 11.5.2
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.0/bin/yarn
      npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.5 => 3.6.5 
      @tarojs/components: 3.6.5 => 3.6.5 
      @tarojs/helper: 3.6.5 => 3.6.5 
      @tarojs/plugin-framework-react: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-alipay: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-h5: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-jd: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-qq: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-swan: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-tt: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-weapp: 3.6.5 => 3.6.5 
      @tarojs/react: 3.6.5 => 3.6.5 
      @tarojs/runtime: 3.6.5 => 3.6.5 
      @tarojs/shared: 3.6.5 => 3.6.5 
      @tarojs/taro: 3.6.5 => 3.6.5 
      @tarojs/webpack5-runner: 3.6.5 => 3.6.5 
      babel-preset-taro: 3.6.5 => 3.6.5 
      eslint-config-taro: 3.6.5 => 3.6.5 
      react: ^18.0.0 => 18.2.0 
      taro-ui: ^2.3.4 => 2.3.4
41zrol4v

41zrol4v1#

首页代码为

import {View, Text, Button} from '@tarojs/components'
import Taro, {useLoad} from '@tarojs/taro'
import {useState} from 'react'
import Child from './child';

import './index.less'

export default function Index() {
  const [a, setA] = useState('haha')
  useLoad(() => {
    console.log('Page loaded.')
  })
  const toNextPage = () => {
    Taro.navigateTo({url: '/pages/next/index'})
  }
  return (
    <View className='index'>
      <Text>
        这是首页{a}
      </Text>
      <Button onClick={toNextPage}>按钮</Button>
      <Child a={a} />
    </View>
  )
}

详情页代码为

import {View, Text} from '@tarojs/components'
import {useState} from 'react'

import './index.less'

export default function Next() {
  // const [b, setB] = useState('xxxxx') // 加了这句首页和详情页都为空白页

  return (
    <View className='index'>
      <Text>
        这是详情页
      </Text>
    </View>
  )
}

配置文件为

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/else/index',
    'pages/next/index',
  ],
  tabBar: {
    list: [
      {
        iconPath: 'resource/images.jpeg',
        selectedIconPath: 'resource/images.jpeg',
        pagePath: 'pages/index/index',
        text: '首页',
      },
      {
        iconPath: 'resource/images.jpeg',
        selectedIconPath: 'resource/images.jpeg',
        pagePath: 'pages/else/index',
        text: '其它',
      },
    ],
    color: '#000',
    selectedColor: '#56abe4',
    backgroundColor: '#fff',
    borderStyle: 'white',
  },
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
})
ep6jt1vc

ep6jt1vc2#

您还是直接给个 demo 仓库吧, <Child /> 也不知道是啥呀

相关问题