React ToDo组件useState无函数触发却自动变更状态问题排查

核心认知偏差 #

你对React Hooks的状态机制理解存在两个根本错误：

• useState生成的是单个组件实例的私有局部状态，绝非全局状态。父组件每渲染一个<ToDoItem />，React就会为这个独立的列表项创建一份专属的clicked状态，不同列表项的状态完全隔离、互不影响。
• React的状态更新是异步批处理机制，事件回调里的闭包只能捕获当前渲染周期的状态值，调用setState不会同步修改当前闭包内的变量，更新后的状态要等组件重渲染后才能在新的闭包中获取到。

现象根因分析 #

你观察到的"反常"表现全是上述机制的正常运行结果，不存在状态自动重置的情况：

1. 多个列表项各自持有独立的clicked状态，你点击第一个项把它的状态改成true，其余未点击的项状态依然是初始值false，自然不会出现"所有项都走删除逻辑"的情况。
2. 当你点击已经划线（即自身clicked为true）的项时，deleting方法会调用父组件传入的onChecked回调，父组件通常会直接把当前项从todo列表中过滤掉——这个clicked=true的组件实例会被直接卸载销毁，根本不会留在页面上。剩下渲染的都是其他独立的项实例，它们的状态本来就是各自的初始值/自身操作后的值，不存在"状态自动变回false"。
3. 你添加的日志本身存在代码错误：第一行console.log(clicked+'0')写在useState声明clicked变量之前，会触发变量未初始化的引用错误，打印出来的结果顺序完全不具备参考价值，直接干扰了你的判断。再加上日志打印的都是闭包内的旧状态值，才会让你误以为状态在函数执行前就发生了变化。

修正后代码 #

把冗余逻辑、错误日志全部移除，理顺交互逻辑即可正常运行：

import React from "react";

function ToDoItem(props) {
  // 状态声明必须放在组件顶部，禁止在声明前引用变量
  const [clicked, setClicked] = React.useState(false);
  
  function handleClick() {
    if (!clicked) {
      // 首次点击：切换为划线状态
      setClicked(true);
    } else {
      // 二次点击：通知父组件删除当前项
      props.onChecked(props.id);
      // 组件即将被父组件卸载，无需再更新本地状态
    }
  }

  return (
    <div onClick={handleClick}>
      <li style={{ textDecoration: clicked ? "line-through" : "none" }}>
        {props.text}
      </li>
    </div>
  );
}

export default ToDoItem;

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