React子组件调用父组件方法更新状态时计数始终为1的问题

count值无法正确累加是两个问题共同导致的：

• 闭包快照问题：父组件中定义的increment方法直接使用了当前渲染周期下的count快照值，而非最新的状态值。同一轮渲染过程中，所有子组件拿到的increment方法捕获的都是初始count=0的闭包，多次调用setCount(count+1)实际传入的新值都是1，React批量更新后最终只会保留1次更新结果。
• 渲染阶段违规更新状态：子组件在组件函数执行（即渲染流程）的过程中直接调用传入的increment方法触发父组件状态更新，违反了React「渲染过程必须是纯函数」的规则，会触发重复渲染、状态更新被覆盖的异常表现。

方案1：修正现有逻辑的问题 #

1. 将increment方法改为函数式更新，确保每次更新都能拿到最新的状态值，规避闭包快照问题：

   const increment = () => {
     setCount(prevCount => prevCount + 1)
   }
   

2. 将子组件中触发更新的逻辑从渲染路径移到useEffect副作用钩子中执行，避免渲染过程中直接触发状态更新：

   import { useEffect } from 'react'
   function Child(props) {
     const child = props.child
     useEffect(() => {
       if (child.answered) {
         props.increment()
       }
     }, [child.answered, props.increment])
     return (<li>{child.name}</li>)
   }
   export default Child
   

3. 父组件渲染子组件时不要用数组下标作为key，改用数据唯一的id字段作为key，避免子组件状态复用导致的异常：

   {children.map((child) => {
     return (<Child key={child.id} increment={increment} child={child}></Child>)
   })}
   

方案2：更优实现（推荐） #

你需要的count本质是根据children数组派生出来的值，完全不需要单独维护state、也不需要子组件通信触发更新，直接在父组件中计算即可，从根源上避免状态同步问题：

import Child from './child'
function Parent() {
  const children = [
    {
      "name": "one",
      "answered": true,
      "id": "001"
    },
    {
      "name": "two",
      "answered": false,
      "id": "002"
    },
    {
      "name": "three",
      "answered": true,
      "id": "003"
    }
  ]
  // 直接派生计算已回答数量
  const count = children.filter(item => item.answered).length

  return (
    <>
      <h1>Parent</h1>
      <progress id="file" max={children.length} value={count}>{count}/{children.length}</progress>
      <ul>
        {children.map((child) => {
          return (<Child key={child.id} child={child}></Child>)
        })}
      </ul>
    </>
  )
}
export default Parent

这种写法不需要维护额外的count状态，也不需要给子组件传递increment方法，代码更简洁，也不会出现状态更新异常的问题。

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