React实现带计数器的输入框：初始值取自API、用户输入时同步更新

原代码存在的问题 #

• counter初始值设为0，没有读取API返回内容的长度，首次渲染时计数器显示错误
• 逻辑错误：initial已经赋值为dataFromApi.length（数字类型），后续计算时又调用initial.length，数字的length属性为undefined，导致长度计算完全失效
• 输入框用defaultValue属于不受控组件，输入内容没有和React状态绑定，既无法保证状态同步，后续要提交输入内容也拿不到对应值
• 没有做1000字的上限限制，用户可以输入超过上限的内容

修改后的实现代码 #

import React, { useState } from 'react'

// 实际项目中dataFromApi可通过props传入或接口请求获取，这里仅做示例
const dataFromApi = '接口返回的默认内容'

const MyInput = () => {
  const MAX_LENGTH = 1000
  // 直接存储输入框内容，初始值取API返回的数据
  const [inputValue, setInputValue] = useState(dataFromApi)
  // 计数器直接通过输入内容长度计算，不需要额外维护独立状态
  const wordCount = inputValue.length

  const handleChange = (e) => {
    const newVal = e.target.value
    // 超过长度上限时不更新状态
    if (newVal.length <= MAX_LENGTH) {
      setInputValue(newVal)
    }
  }

  return (
    <>
      <span>{wordCount}/{MAX_LENGTH}</span>
      <input
        value={inputValue}
        onChange={handleChange}
        maxLength={MAX_LENGTH} {/* 原生属性限制输入长度，双重保障 */}
      />
    </>
  )
}

export default MyInput

优化说明 #

• 采用受控组件实现，符合React单向数据流设计，输入内容和状态始终同步，后续扩展功能（如清空、提交）更方便
• 移除冗余的counter状态，直接通过输入内容长度计算计数器数值，避免多状态不同步问题
• 新增代码层面的长度判断和原生maxLength属性双重限制，确保输入内容不会超过1000字上限
• 逻辑更简洁，可维护性更高

内容的提问来源于stack exchange，提问作者8245734589