React中依赖计数器值的子传父状态更新不生效问题排查

你的代码有3个核心错误，直接导致状态更新失效：

• 渲染阶段直接调用状态更新函数，触发无限重渲染循环：你把setIsCompleted的判断逻辑直接写在了JSX的<span>标签内部，这部分代码会在Counter组件每次渲染时立刻执行。而setIsCompleted本身会触发组件重渲染，重渲染又会再次执行setIsCompleted，直接进入死循环。React检测到这种异常行为会直接拦截重复的状态更新，自然无法得到预期结果。
• 所有列表项共用同一个完成状态：你把isCompleted定义在最外层的ItemsList组件中，所有map渲染出来的Item都共享这一个布尔值，就算状态能正常更新，也会出现一个项达标、所有项都显示完成的问题，无法实现单条Item的差异化展示。
• 冗余的错误Hook调用：父组件里写的const quantity = useQuantity;既漏了Hook调用必须的括号，后面也没有实际用到这个变量——你已经在Counter组件内部单独调用了useQuantity维护独立计数，父组件的这段代码完全是冗余的。

1. 所有状态更新逻辑不要直接写在JSX渲染代码里：判断计数是否达标的逻辑要放到useEffect副作用中，只有当计数值、目标值变化时才触发状态更新，从根源避免渲染死循环。
2. 把单条Item的完成状态下沉到Item维度，不要在父组件维护全局共享的isCompleted，保证每个列表项的状态独立。
3. 删掉父组件里冗余的错误Hook调用。

修正后的代码如下：

修正后的Counter组件 #

import { useEffect } from 'react';
import useQuantity from "../Hooks/useQuantity"

export const Counter = ({ neededValue, setIsCompleted }) => {
  const quantity = useQuantity()

  // 仅在计数值/目标值变化时，判断是否完成
  useEffect(() => {
    setIsCompleted(quantity.value === neededValue);
  }, [quantity.value, neededValue, setIsCompleted])

  const decrement = () => {
    quantity.setValue(quantity.value - 1);
  };

  const increment = () => {
    quantity.setValue(quantity.value + 1);
  };

  return (
    <>
      <button onClick={decrement} disabled={quantity.value === 0} style={{color: "#9a8866", backgroundColor: "inherit", border: "1px solid #9a8866"}}> - </button>
      <span style={{padding: "10px", color: "#9a8866"}}>
        {quantity.value} / {neededValue}
      </span>
      <button onClick={increment} disabled={quantity.value === neededValue} style={{color: "#9a8866", backgroundColor: "inherit", border: "1px solid #9a8866"}}> + </button>
    </>
  );
};

export default Counter

修正后的列表组件 #

抽离独立的QuestItem子组件，每个子组件维护自己的完成状态，避免全局状态污染：

import { useState } from 'react';

// 单个任务项组件，独立维护自己的完成状态
const QuestItem = ({ item }) => {
  const [isCompleted, setIsCompleted] = useState(false)
  return (
    <Container>
      <Item>
        {isCompleted? <p style={{color: "white"}}>yes</p> : <p style={{color: "white"}}>no</p>}
        <Item.ImageWrapper>
          <Item.Image src={item.img}/>
        </Item.ImageWrapper>
        <Item.Tracker>
          <Counter neededValue={item.quest} setIsCompleted={setIsCompleted} />
        </Item.Tracker>
      </Item>
    </Container>
  )
}

export default function ItemsList() {
  return (
    <div style={{display: "flex", flexWrap: "wrap", justifyContent: "space-around"}}>
      {/* 记得给列表项加唯一key，替换成你数据里的唯一标识字段即可 */}
      {questsData.map(item => <QuestItem key={item.id} item={item} />)}
    </div>
  )
}

注：React中setState只能在两个地方调用：一是用户触发的事件回调（比如onClick、onChange），二是useEffect副作用钩子内，绝对不能直接写在组件渲染的主流程代码里，否则必然触发重渲染死循环。等你逻辑调通后，再把内联样式迁移到Styled Components即可。

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