React类组件转函数组件：setState回调转useState功能异常排查

原类组件的核心逻辑是：

1. 当类型为jobs时，先将选中的对象数组存入组件内部状态jobsSelected
2. 等待状态更新完成后，从更新后的状态中提取id数组，调用setFieldValue同步到表单字段

当前函数组件的写法缺失了更新本地jobsSelected状态这一步，且没有模拟原逻辑中「状态更新完成后再同步表单」的时序，这是功能异常的核心原因。

修复后的代码 #

const [jobsSelected, setJobsSelected] = useState([]);

const callBackCatAndSubcat = useCallback((items, type) => {
  if (type === 'jobs') {
    // 先更新本地状态，和原类组件逻辑对齐
    setJobsSelected(items);
  }
}, []);

// 监听jobsSelected的变化，状态更新后同步到表单字段
useEffect(() => {
  setFieldValue('jobsSelected', jobsSelected.map(item => item.id));
}, [jobsSelected, setFieldValue]);

关键说明 #

• 恢复本地状态jobsSelected的更新，确保组件内部状态与原逻辑一致，避免其他依赖该状态的功能异常
• 用useEffect替代类组件中setState的回调函数，保证只有当jobsSelected状态确实更新后，才会调用setFieldValue同步表单
• useCallback的依赖数组设为空——setJobsSelected是useState返回的稳定函数，无需加入依赖

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