使用useEffect,组件获取不到props,三楼已添加demo



  • 三楼有代码,可以重现

    背景
    1.index页面使用自定义hooks,在hooks里面使用useEffect并返回数据
    2.tabbar是个index使用的普通的组件,功能是底部的tabbar(没有使用小程序自带的,是自己写的)
    3.tabbar引入了另一个组件tabbar-item,每个item是tabbar里的一项

    *in tabbar.jsx*
    return (
        <View className="bottom-tabbar">
          {data.map((item, index) => {
            return <BottomTabbarItem key={index} itemData={item} />
          })}
        </View>
    )
    

    4.使用BottomTabbarItem渲染出tabbar里的每个按钮

    出现问题:
    Tabbar组件可以收到Index传来的props,BottomTabbarItem不能收到Tabbar传来的props

    其他测试
    1.在自定义的hooks里面不return数据可以正常使用
    2.在自定义的hooks里面不使用useEffect可以正常使用
    3.H5端和微信小程序端正常
    4.其他Index直接使用的组件正常
    5.BottomTabbarItem打印props出来的结果是设置的defaultProps



  • 此回复已被删除!


  • 重现代码
    index.tsx

    import Taro, { useState, useEffect } from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import BottomTabbar from './bottom-tabbar'
    
    export default function Index() {
      const [title, setTitle] = useState('默认')
      const [value, setValue] = useState('value1')
    
      const list = [
        {
          text: '新建',
          type: 'new'
        }
      ]
    
      useEffect(() => {
        setTitle('更改')
      }, [])
    
      useEffect(() => {
        setValue('value2')
      }, [title])
    
      return (
        <View>
          <View>{value}</View>
          <View>
            {list.map(item => {
              return <BottomTabbar key={item.type} itemData={item} />
            })}
          </View>
        </View>
      )
    }
    
    

    bottom-tabbar.tsx

    import Taro, { useContext, useState, useRouter } from '@tarojs/taro'
    import { View } from '@tarojs/components'
    
    export default function BottomTabbar(props) {
    
      console.log(props)
      const { itemData: item } = props
    
      return (
        <View>
          <View>{item.text}</View>
        </View>
      )
    }
    
    

    BottomTabbar是渲染不出来的,注释掉两个useEffect就能出来



  • 现在升级到1.3.26了,升级之后同样的代码依然不行,不过明确的报错了

    thirdScriptErrornextTick is not defined;at pages/index/index onReady function;ReferenceError: nextTick is not defined

    👽 Taro v1.3.26
    
    
      Taro CLI 1.3.26 environment info:
        System:
          OS: macOS 10.14.4
          Shell: 5.3 - /bin/zsh
        Binaries:
          Node: 12.13.0 - /usr/local/bin/node
          Yarn: 1.16.0 - /usr/local/bin/yarn
          npm: 6.12.0 - /usr/local/bin/npm
        npmGlobalPackages:
          typescript: 3.6.4
    


  • 升级到1.3.27,nextTick is not defined是不报错了,但是获取不到props的问题依然没解决。。。。



  • @lzs2000131 你是否使用了构造函数, 然后未调用super(...arguments)



  • @keep2zero 没有构造函数,所有代码均是hooks函数式编程,可以看三楼demo



  • 他这个问题,确实存在, 在小程序,函数组件, 或者内部组件 也不渲染



  • 1.3.29 已修复


登录后回复