如何在React Hook中使用useState实现department数组的新增与更新

• 闭包捕获旧state：SelectPicker的onChange回调在组件渲染时生成，内部捕获的是当前渲染周期的department值。当你新增第二个选择器时，该选择器的回调捕获的department还是初始空数组，修改空数组索引1后赋值，就会覆盖之前已经更新的数组内容。
• state更新参数错误：你修改完拷贝的dept数组后，调用setDepartment时传入的是未修改的旧department变量，而非修改后的dept变量，也会导致更新不符合预期。
• state更新为异步行为：你在setDepartment之后直接打印department拿到的始终是更新前的旧值，无法用来验证更新结果。

把请求回调中更新department的代码替换为函数式更新写法，函数式更新会自动传入最新的state值，彻底规避闭包问题，同时支持按索引修改对应条目：

useDepartments.getAll({ room: id, length: 9999 }).then(response => {
  setDepartment(prevDepartment => {
    const newDepartment = [...prevDepartment];
    // 按索引修改对应位置的内容，不会新增多余条目
    newDepartment[index] = response.data.data;
    // 如需验证更新结果，可在此处打印newDepartment
    console.log(newDepartment);
    return newDepartment;
  })
});

同时可删除无用的立即执行函数getDepartment，直接写请求逻辑即可。

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