React向兄弟组件传递状态时受控输入框值丢失问题求教

为什么输入框值会丢失 #

你当前的实现中，输入状态fieldValue是维护在NumberComp内部的，正常情况下只要组件不被卸载、没有触发重建，内部状态不会凭空丢失，你遇到的问题大概率是以下两个常见原因导致：

• 父组件渲染NumberComp时绑定了不稳定的key值（比如key={Math.random()}），key变化会让React认为是新组件，直接卸载旧组件重建，原有内部状态自然会被清空
• 传给NumberComp的setPostcode引用不稳定，如果你父组件中传递的不是useState直接返回的原生setter，而是自己封装的函数，又没有用useCallback包裹，会导致每次父组件渲染都生成新的setPostcode实例，触发NumberComp重渲染，虽然正常重渲染不会丢失内部状态，但如果配合其他不规范写法就可能出现异常

要不要每次输入都把值传给父组件 #

两种方案都可以，不存在对错：

• 如果你只有输入满4位时才需要兄弟组件感知这个值，你当前满4位才调用setPostcode的逻辑是完全合理的，不用修改，能减少不必要的父组件更新
• 如果你后续需要父组件支持重置输入框、回填默认值等操作，更推荐直接把输入状态完全提到父组件维护，把NumberComp改成纯受控组件，即使每次输入都触发父组件重渲染，对于这种简单场景来说性能开销可以完全忽略，代码逻辑也更简单好维护

要不要用Context实现 #

完全不需要。Context是用来解决跨多层级组件传递数据的问题，你现在只是同层级兄弟组件通信，用状态提升（把共享状态放到公共父组件）就足够了，用Context反而会增加代码复杂度，属于过度设计。

可直接落地的优化方案 #

方案1：保留现有内部状态的写法，修复丢值问题 #

1. 固定NumberComp在父组件中渲染的key，不要用动态值
2. 用React.memo包裹NumberComp，避免不必要的重渲染
3. 优化输入校验逻辑，避免非数字内容输入
   修改后代码如下：

// 用memo包裹，props不变就不会重渲染
const NumberComp = React.memo(({setPostcode})=>{
  const [ fieldValue, setFieldValue ] = useState('')

  useEffect(()=>{
    if(fieldValue.length === 4){
      setPostcode(fieldValue)
    }
  }, [fieldValue, setPostcode])

  const updateNumber = (e)=>{
    const value = e.target.value
    // 用正则校验只允许输入最多4位数字，比isNaN判断更准确
    if(!/^\d{0,4}$/.test(value)) return
    setFieldValue(value)
  }

  return <input onChange={updateNumber} value={fieldValue} type="text" />
})

如果父组件传递的setPostcode是自定义函数，记得用useCallback包裹保证引用稳定：

// 父组件中
const setPostcode = useCallback((val) => {
  // 你的业务逻辑
}, [/* 依赖项 */])

方案2：改成完全受控组件，更符合React规范，从根源避免状态丢失问题 #

直接把输入状态提到父组件，不需要内部维护state，代码更简洁：

// 父组件中
const [postcode, setPostcode] = useState('')
// 监听postcode变化，满4位触发兄弟组件逻辑
useEffect(() => {
  if(postcode.length ===4) {
    // 执行兄弟组件需要的逻辑
  }
}, [postcode])

// 渲染组件
<NumberComp value={postcode} onChange={setPostcode} />

// NumberComp 组件
const NumberComp = ({value, onChange}) => {
  const updateNumber = (e) => {
    const inputVal = e.target.value
    if(!/^\d{0,4}$/.test(inputVal)) return
    onChange(inputVal)
  }
  return <input onChange={updateNumber} value={value} type="text" />
}

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