页面添加计时器并setState后，Input输入的内容会被覆盖

[xuxiaoxiao312]

相关平台

微信小程序

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

复现步骤

import React, { Component } from 'react'
import { Input } from '@tarojs/components'
import Page from '../../components/page/page'

export default class GroupDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 10,
      countDown: ''
    }
  }

  componentDidMount() {
    this.timer()
  }

  timer() {
    setTimeout(() => {
      this.timer()
    }, 1000)
    this.setState({
      countDown: 'test'
    })
  }

  render() {
    const { countDown, num } = this.state

    return (
      <Page title='' loadingStatus='done'>
        {countDown}
        <Input value={num} />
      </Page>
    )
  }
}

期望结果

计时器不干扰输入框正常使用

实际结果

输入框输入时会随着计时器的setState将输入框内的内容置为初始值

环境信息

👽 Taro v3.0.21


  Taro CLI 3.0.21 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.13.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.12.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.18 => 3.0.18 
      @tarojs/mini-runner: 3.0.18 => 3.0.18 
      @tarojs/react: 3.0.18 => 3.0.18 
      @tarojs/runtime: 3.0.18 => 3.0.18 
      @tarojs/taro: 3.0.18 => 3.0.18 
      @tarojs/webpack-runner: 3.0.18 => 3.0.18 
      babel-preset-taro: 3.0.18 => 3.0.18 
      eslint-config-taro: ^3.0.18 => 3.0.18 
      eslint-plugin-taro: ^3.0.25 => 3.0.25 
      react: ^16.10.0 => 16.14.0 
      taro-ui: ^3.0.0-alpha.7 => 3.0.0-alpha.7 
    npmGlobalPackages:
      typescript: 4.1.2

问题描述补充：
https://user-images.githubusercontent.com/24541297/106861303-8b520000-6700-11eb-8bb1-b198e5f12417.mp4

[xuxiaoxiao312]

这个问题没有人看看吗