如何将React类组件重构为函数组件并解决首次渲染值为undefined问题

问题原因 #

你写的函数组件有3个明显的错误，导致和类组件表现不一致：

• 自定义的format箭头函数没有写return语句，执行后默认返回undefined，所以formattedValue初始化值就是undefined
• onChange回调中直接使用了未定义的target变量，需要从事件对象e中获取e.target
• （可选）如果需要响应父组件后续传入的新value，需要加同步逻辑，原类组件默认只在初始化时读取一次props值

修复后的函数组件代码（和类组件行为完全一致） #

export const NumInput = ({ value }) => {
  // 修复1：添加return语句返回格式化结果
  const format = (num) => {
    return num != null ? num.toString() : ''
  }
  // 初始化逻辑和类组件constructor保持完全一致
  const [formattedValue, setFormattedValue] = useState(format(value))

  const onChange = (e) => {
    // 修复2：从事件对象e中获取target
    if (e.target.value.match(/^\d*$/)) {
      setFormattedValue(e.target.value)
    }
  }

  return (
    <input
      type="text"
      value={formattedValue}
      onChange={onChange}
    />
  )
}

可选补充：响应父组件value更新 #

如果业务逻辑需要在父组件传入新的value时同步更新输入框内容，可以新增useEffect监听value变化：

useEffect(() => {
  setFormattedValue(format(value))
}, [value])

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