React中添加useEffect后useState仍未更新的树形复选框重置问题排查

嘿，我来帮你拆解代码里的问题，你这情况是几个典型的React状态管理小坑凑一块了，咱们一个个捋：

1. 无限循环的useEffect是核心元凶 #

你写的这个useEffect绝对是最大的问题：

useEffect(() => {
  setOriginalValues(originalValues);
}, [originalValues]);

它的依赖项是originalValues，但内部又调用setOriginalValues把状态设置成它自己——这会触发无限重渲染循环：状态更新→触发useEffect→再次更新状态→再次触发useEffect……不仅白白浪费性能，还会彻底打乱originalValues的状态逻辑，导致树形组件完全无法正确响应状态变化。

这个useEffect完全没有存在的必要，直接删掉它就好！

2. handleCancel里的冗余代码（易混淆且无用） #

你在handleCancel里的这行代码是多余的：

const originalValues = myData || []; //myData是存储在const中的原始数据

这个局部变量和你的state变量同名，不仅毫无作用，还容易让你自己混淆变量作用域，直接删掉就行。另外，如果myData可能是null或undefined，建议把setOriginalValues的写法改成更安全的：

setOriginalValues([...(myData || [])]);

3. 可能存在的状态绑定逻辑偏差（隐性坑） #

如果你的树形组件选中状态是直接绑定originalValues的，那解决前两个问题后应该能正常重置。但如果你的实际逻辑是：用户操作复选框时修改的是另一个状态（比如currentValues），而originalValues只是用来存储初始值，那你需要调整状态管理逻辑：

• 初始时把originalValues设置为myData的副本（避免后续myData变化影响初始值）
• 点击取消时，是把用户操作的状态重置为originalValues，而不是去修改originalValues本身

给你一个修正后的示例参考：

// 用两个状态分离：存初始值、存用户当前修改的值
const [originalValues, setOriginalValues] = useState<string[]>([]);
const [currentValues, setCurrentValues] = useState<string[]>([]);

// 组件挂载/原始数据更新时初始化状态
useEffect(() => {
  if (myData) {
    // 存副本，避免引用类型的坑
    const initialValues = [...myData];
    setOriginalValues(initialValues);
    setCurrentValues(initialValues);
  }
}, [myData]);

// 取消按钮点击：重置为初始值
const handleCancel = () => {
  setCurrentValues([...originalValues]);
};

// 树形组件绑定currentValues，用户操作复选框时修改currentValues
// 比如勾选/取消时调用setCurrentValues更新选中数组

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