react-number-format绑定value属性时如何设置默认值1？

问题原因 #

你现在使用的是React受控组件模式，组件的渲染值完全由value绑定的serves状态控制，defaultValue仅适用于非受控组件（即没有绑定value属性的场景），因此直接设置defaultValue不会生效。

可行解决方法 #

方案1：设置状态初始值（最推荐） #

直接给serves对应的useState设置初始值1即可，这是受控组件设置默认值的标准方案：

// 原有状态声明大概率为如下写法
// const [serves, setServes] = useState()
// 修改为
const [serves, setServes] = useState(1)

不需要修改你现有的NumberFormat组件代码，即可实现输入框默认显示1的效果。

方案2：异步场景下设置默认值 #

如果你的默认值需要异步获取、或者需要等其他逻辑执行完再赋值，可以通过useEffect在合适的时机给serves赋值：

import { useEffect } from 'react'

// 组件内添加以下逻辑
useEffect(() => {
  // 比如从接口拿到默认值后赋值，这里示例直接设为1
  setServes(1)
}, []) // 空依赖数组代表组件挂载时执行一次，有其他触发条件可自行调整依赖项

最终组件代码验证 #

你的NumberFormat组件不需要额外改动，保持现有绑定逻辑即可正常生效：

<NumberFormat  
  allowNegative={false} 
  label="Serves" 
  customInput={TextField} 
  variant="outlined" 
  name="serves" 
  value={serves} 
  thousandSeparator={true} 
  decimalScale={0} 
  fixedDecimalScale={true} 
  onChange={e => setServes(e.currentTarget.value)} 
/>

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