H5 Input组件如果绑定了Value，第二次更新组件，会触发死循环

[ShaoGongBra]

相关平台

H5

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

复现步骤

<Input value={value} />

比如说我刷新一下页面上的数据，然后就会触发死循环，页面白屏

期望结果

正常渲染

实际结果

延迟渲染

环境信息

Taro CLI 3.6.5 environment info:
    System:
      OS: macOS 13.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.16.0 - /var/folders/5j/t9hd6v1d3s902h5xb3g1rmv40000gn/T/yarn--1682234222327-0.7099768356889637/node
      Yarn: 1.22.19 - /var/folders/5j/t9hd6v1d3s902h5xb3g1rmv40000gn/T/yarn--1682234222327-0.7099768356889637/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.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/rn-runner: 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/taro-rn: 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 
      expo: ^47.0.13 => 47.0.13 
      react: ^18.2.0 => 18.2.0 
      react-native: ^0.70.7 => 0.70.7 

[zhouzyc]

相同问题+1

[ShaoGongBra]

回退到3.6.2问题消失

[ZakaryCode]

各种写法都没有在 3.6.5 中复现该问题，可以提供个 demo 看看 🤔️

[ShaoGongBra]

看这个示例 https://github.com/ShaoGongBra/taro-test @ZakaryCode

[ShaoGongBra]

@ZakaryCode 能看到问题吗

[ZakaryCode]

看这个示例 https://github.com/ShaoGongBra/taro-test

这个确实有问题，我考虑下怎么优化

当前可以给个默认值跳过问题，初始为 undefined 导致的

    <Input
-      value={values.value1}
+      value={values?.value1 || ''}
      onInput={e => setValues({ ...values, value1: e.detail.value })}
      placeholder='输入1'
    />
    <Button onClick={() => setShow(true)}>按钮</Button>
    <View>输入1为空点击按钮会直接报错，输入1不为空，点击按钮，再输入输入1也会报错</View>
    <View>当绑定的值为空的时候就会报错</View>
    {
      show && <Input
-        value={values.test}
+        value={values?.test || ''}
        onInput={e => setValues({ ...values, test: e.detail.value })}
        placeholder='输入2'
      />
    }

[ShaoGongBra]

我看还有其他人发Picker组件也有类似的问题，是不是同一个问题

[ZakaryCode]

我看还有其他人发Picker组件也有类似的问题，是不是同一个问题

是的