TypeScript React组件删除未使用useState后功能失效问题

这行setLabelValue(value)本质是歪打正着强制触发了React组件重渲染——你整套代码的状态管理完全不符合React的运行规则，删掉这行之后没有东西能触发组件重渲染，视图自然不会更新，看起来就是功能失效。

代码里的核心问题 #

• 存储对比ID的idsToCompare、标签文本value、选中态isChecked全是组件内的普通局部变量，不是React响应式状态。React重渲染时会从头执行组件函数，这些变量每次都会被重置为初始值，而且修改普通变量根本不会触发React的视图更新流程。
• 给复选框用的defaultChecked只在组件首次挂载时生效一次，后续哪怕值变了，复选框的实际选中状态也不会跟着更新，本身就不适合做交互态绑定。
• 你觉得没用到labelValue为什么还影响功能？因为React组件只有在自身state变化、传入props变化、订阅的context变化时才会触发重渲染。你调用setLabelValue的时候，不管传的是什么值，React都会标记当前组件需要重渲染，你之前改的那些普通变量的值才会在重渲染时被重新计算、同步到视图上——这就是留着这行代码"看起来能跑"的唯一原因，完全是误打误撞。
• 额外提一句你那行let idsToCompare: string[] = [] || ""写的完全有问题，空数组是真值，这行等价于每次渲染都把idsToCompare重置为空数组，现在单产品测试可能没暴露问题，做多产品对比的时候逻辑必崩。

正确修复写法 #

所有会影响视图渲染的数据都要声明为React状态，复选框用受控模式绑定，不要靠没用的state强制刷视图：

export const ProductItemBox = ({
  product,
}: ProductProps): JSX.Element => {
  const [idsToCompare, setIdsToCompare] = useState<string[]>([]);
  // 直接根据状态派生计算选中态和标签文本，不需要额外存冗余变量
  const isChecked = idsToCompare.includes(product.productId);
  const labelText = isChecked ? "remove" : "add";

  const handleComparator = () => {
    // 用函数式更新避免闭包拿到旧的状态值
    setIdsToCompare(prev => 
      prev.includes(product.productId)
        ? prev.filter(id => id !== product.productId)
        : [...prev, product.productId]
    );
  };

  return (
    <li key={product.productId}>
      <div className="comparator-form">
        <input
          type="checkbox"
          id={product.productId}
          value={product.productId}
          // 受控绑定checked属性，不用defaultChecked
          checked={isChecked}
          onChange={handleComparator}
        />
        <label htmlFor={product.productId}>{labelText}</label>
      </div>
    </li>
  );
};

注意：如果idsToCompare需要在多个ProductItemBox组件之间共享，不要把这个状态存在单个商品组件里，要提到共同的父组件，通过props传递状态和修改方法，或者用状态管理/context存储。

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