taro 微信小程序 通过数组长度判断 className 没有动态切换 而视图是更新了

[leefinder]

问题描述

微信小程序中，期望通过数组的长度来更新className，实际通过数组长度来判断不执行更新，h5端正常

复现步骤

1. 通过定义了变量testArr 默认空数组
2. 通过定义变量b 默认false
3. 定义2个样式，aaa红色背景，白色字体，bbb蓝色背景，白色字体， 默认蓝色背景，白色字体
4. 按钮上绑定changeArr去更新 testArr = [1, 2, 3, 4]，b = true
5. 视图中数组长度变为4，通过数组长度更新的className没有切换，通过布尔值判断的className有蓝色背景切换成红色背景

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */

import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'


import './index.scss'

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion
type PageOwnProps = {}

type PageState = {
    testArr: Array<number>,
    b: boolean
}

class Index extends Component {

    /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
    config: Config = {
        navigationBarTitleText: '',
        enablePullDownRefresh: true,
        backgroundTextStyle: 'dark'
    }
    state: PageState = {
        testArr: [], // 判断数组长度不行
        b: false // 布尔值可以
    }
    changeArr = () => {
        this.setState({
            testArr: [1, 3, 5, 6],
            b: true
        })
    }
    render() {
        const { testArr, b } = this.state
        return (
            <View className='index'>
                发现
                <View className={testArr.length >= 2 ? 'aaa' : 'bbb'}>{testArr.length}</View>
                <Button onClick={this.changeArr}>改变testArr长度</Button>
                <View className={b ? 'aaa' : 'bbb'}>{testArr.length}</View>
            </View>
        )
    }
}

// #region 导出注意
//
// 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性
// 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误
//
// #endregion

export default Index as ComponentClass<PageOwnProps, PageState>

期望行为

报错信息

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[shenghanqin]

@leefinder 请按照标准issue来填写，你给出的链接我这报“403 forbidden”

[infinnie]

我也遇到了类似的问题…

[leefinder]

@shenghanqin 大佬帮忙看下，还是我写的问题？h5编译模式下是正常的，微信小程序模式下不行

[shenghanqin]

这样呀，我没用你这样的写法，我基本用的基于强大的classnames这个npm包来做class变换。这个包不大，你可以试试看。

[li-shuaishuai]

遇到了同样的问题，不只是 className，应该是渲染有问题
经测试 taro 1.3.25 版本没问题
我升级到 1.3.27 遇到了同样问题

[leefinder]

@shenghanqin classnames这个包我也有用，就是这里图简单，结果团队里有个妹子反映了，我差点提大刀过去，说JD大佬写的怎么会有问题，然后我被反杀了

[shenghanqin]

@leefinder @li-shuaishuai 要淡定，无论是react还是taro，小版本的升级也是要做全量测试的。比如1.3.25没问题，1.3.27万一有小问题，那就可能有问题咯。所以，小版本升级也要做留心滴。
比如，taro版本呢，我是两个月升级一次吧，但我所在公司的团队react是半年到一年才会更新一次版本。嘻嘻

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[Chen-jj]

有任何报错，但显示的结果不如预期

#882