React中如何在父组件状态变化时强制子组件重新渲染？

问题原因 #

子组件中使用useState(props.value)初始化本地状态时，仅会在组件首次挂载时读取props的值。当父组件的inputValue状态更新（比如点击按钮或计算完成自动触发），子组件的props虽然变化，但useState的初始值不会重新执行，导致子组件本地状态和父组件props不同步，输入框内容无法更新。

解决方案 #

通过useEffect监听父组件传入的props.value变化，同步更新子组件的本地状态。这种方式既保留了子组件输入过程中本地维护临时值的需求（失焦再同步父组件），又能响应父组件的状态更新。

修改后的子组件代码 #

import React,{useState, useEffect} from 'react'

const ChildComponent = (props) => {
  const[inputValue, setInputValue] = useState(props.value)

  // 监听props.value变化，同步子组件本地状态
  useEffect(() => {
    setInputValue(props.value)
  }, [props.value]) // 依赖项为props.value，仅当它变化时触发

  return (
    <div>
      <input 
        value={inputValue} 
        onChange={(e)=>setInputValue(e.target.value)}
        onBlur={(e)=>props.setState(e.target.value)}
      />
    </div>
  )
}
export default ChildComponent

另一种方案：完全受控组件（可选） #

如果不需要子组件维护本地临时状态，可直接将输入框与父组件状态绑定，输入过程中实时同步：

// 子组件无需本地state
import React from 'react'

const ChildComponent = (props) => {
  return (
    <div>
      <input 
        value={props.value} 
        onChange={(e)=>props.setState(e.target.value)}
      />
    </div>
  )
}
export default ChildComponent

这种方式下，父组件状态更新会直接反映到输入框，无需额外监听逻辑，但会实时触发父组件的状态更新。

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