React父组件状态变更后无法触发所有子组件重新渲染问题求解

算力阿峰

2026-9-26

问题根因

子组件内部通过useState(activeProp)定义了独立的active状态，React的useState初始值仅在组件首次挂载时生效，后续父组件传递的activeProp（包括父组件prop变化、接口请求更新listOfBool后的值）发生变化时，子组件内部的active状态不会自动同步，因此无法触发子组件重新渲染。同时当前代码里子组件维护了和父组件重复的状态，也容易出现数据不一致的问题。

解决方案

推荐优先选择受控组件方案，删除子组件内部冗余的本地状态，完全由父组件状态控制渲染：

const Child = ({prop1, activeProp, parentCallback}) => {
  const setThis = (e) => {
    parentCallback(e, !activeProp)
  }

  return (
    <>
      <p className={`${activeProp ? 'selected' : ''}`} onClick={() => setThis(prop1)}>{prop1}</p>
    </>
  )
}

该方案的优势是只有父组件一份数据源，不会出现数据不一致的问题，父组件的prop变化、listOfBool更新都会直接传递到子组件触发重渲染。

如果你确实需要子组件维护内部独立状态，可添加useEffect监听传入的activeProp变化，同步更新本地状态：

const Child = ({prop1, activeProp, parentCallback}) => {
  const [active, setActive] = useState(activeProp)
  // 新增监听逻辑，父组件传值变化时同步本地状态
  useEffect(() => {
    setActive(activeProp)
  }, [activeProp])

  const setThis = (e) => {
    const newVal = !active
    parentCallback(e, newVal)
    setActive(newVal)
  }

  return (
    <>
      <p className={`${active ? 'selected' : ''}`} onClick={() => setThis(prop1)}>{prop1}</p>
    </>
  )
}