1.3.26 版本中更新useState不会触发渲染

[KanChaiShaoXia]

问题描述

更新useSatate没有触发渲染组件

复现步骤

// 点击一个标签
const activeFilter = item => {
   // 从数组中找到被点击的标签
   selectFilter.map((i: any) => {
   // 高亮或重置标签
     if (i.type === item.type)
       i.select.map(o => (o.id === item.id ? (o.active = !o.active) : false));
   });
   // 更新state
   setSelectFilter(selectFilter);
 };

// 渲染
<View className="tag-content">
  {selectFilter.map((item: any) => {
    return (
      <View key={item.title}>
        <View className="tag-title">{item.title}</View>
        <View className="tag-box">
          {item.select.map(i => {
            return (
              <View
                key={item.id}
                className={`tag ${i.active ? "active" : ""}`}
                onClick={() => activeFilter(i)}
              >
                {i.name}
              </View>
            );
          })}
        </View>
      </View>
    );
  })}
</View>

期望行为

更新state后触发渲染。

系统信息

👽 Taro v1.3.26

Taro CLI 1.3.26 environment info:
System:
OS: macOS 10.15.1
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
npmPackages:
@tarojs/async-await: 1.3.26 => 1.3.26
@tarojs/components: 1.3.26 => 1.3.26
@tarojs/plugin-babel: 1.3.26 => 1.3.26
@tarojs/plugin-csso: 1.3.26 => 1.3.26
@tarojs/plugin-sass: 1.3.26 => 1.3.26
@tarojs/plugin-uglifyjs: 1.3.26 => 1.3.26
@tarojs/router: 1.3.26 => 1.3.26
@tarojs/taro: 1.3.26 => 1.3.26
@tarojs/taro-alipay: 1.3.26 => 1.3.26
@tarojs/taro-h5: 1.3.26 => 1.3.26
@tarojs/taro-swan: 1.3.26 => 1.3.26
@tarojs/taro-tt: 1.3.26 => 1.3.26
@tarojs/taro-weapp: 1.3.26 => 1.3.26
@tarojs/webpack-runner: 1.3.26 => 1.3.26
eslint-config-taro: 1.3.26 => 1.3.26
eslint-plugin-taro: 1.3.26 => 1.3.26
nerv-devtools: ^1.5.6 => 1.5.6
nervjs: ^1.5.6 => 1.5.6
react: ^16.12.0 => 16.12.0
stylelint-config-taro-rn: 1.3.26 => 1.3.26
stylelint-taro-rn: 1.3.26 => 1.3.26

补充信息

不是每一个更新state都不会触发渲染，但这个组件在1.3.26里确实每次都不会被触发。

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[KanChaiShaoXia]

我似乎知道了没有被渲染的原因，应该是由aec705e所导致的
不过直接修改了源码也没有效果。不确定是这个问题。
直接改动state数据之后再更新state导致数据相同跳过渲染。
这个情况下应该被跳过吗 @Chen-jj
目前看应该只有小程序的hooks才会出现这种情况。

[dpyzo0o]

你是直接改的selectFilter数组，reference是没有变得。你应该是setState一个新数组就行了。

[lbb1811]

同样的问题。 setState一个新对象、数组能解决。
但是其 length 不能正确计算。我删除了数组最后一项，这个Dom结构还在。

item.educationInfo.length > 0 && (
  <View>
    <View>资料：</View>
    <View className='list'>
      {
        item.educationInfo.map((e, i) => (
          <View key={i} className='articles' onClick={onClick}>
            //
          </View>
        ))
      }
    </View>
  </View>
)

[Chen-jj]

@LetterYan @dpyzo0o 正解，原因是你直接改了 selectFilter 内属性。你可以用 React 试试，也是跑不了的。

https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update