react里面 点击一个开关按钮的时候耗时2s才会响应 所以想要一个loading 我useEffect监听的开关绑定的变量 useEffect里面是做的处理 为什么不生效？

Question

react里面 点击一个开关按钮的时候耗时2s才会响应 所以想要一个loading 我useEffect监听的开关绑定的变量 useEffect里面是做的处理
但是我在useEffect里面第一行setLoading(true),最后一行setLoading(false),loading没有生效 是为什么？

Answer 1

是说中间那个 代码段落 耗时特别久吗？应该是同步的，导致状态没有更新。

可以将 setLoading(true) 后面的代码放到一个 setTimeout 中试试，让浏览器和 react 在中间可以多渲染一帧

Answer 2

代码中将 setLoading(true) 和 setLoading(false) 放在 useEffect 中可能会触发 React 的批处理机制，导致 React 将状态合并后再统一渲染。
可以试着将 setLoading(true) 放在触发 setIsJl 状态变更的地方，从而将 setLoading(true) 和 setLoading(false) 分离开来。
希望这个回答有所帮助！

Answer 3

我试着帮你修改了一下代码；
1.用 Map 去替换 some 比较 ，Map 在大数据量查询比较快
2.去除部门数组的获取方式，部因为这里的 map消耗太大了 可以省略 在上面的循环中构建出。

const selecteds = ['1,2,3', '4,5,6', '1,2,1', '2,1,4'];

function getSelecteds(selecteds: string[]): {
  newSelectKeys: string[]; department: {
    id: string;
    organization: string;
    parentId: string;
  }[];
} {
  const newSelectKeys: string[] = [];
  const department = [] as Array<{ id: string, organization: string, parentId: string }>;
  const maps = new Map<string, string>();

  for (let i = 0; i < selecteds.length; i++) {
    const key = selecteds[i].split(',')[2];
    maps.set(key, selecteds[i]);
  }

  maps.forEach((value) => {
    const [id, organization, parentId] = value.split(',');
    if (!maps.has(id)) {
      newSelectKeys.push(value);
      department.push({ id, organization, parentId })
    }
  });
  return { newSelectKeys, department };
}
console.log('res====', getSelecteds(selecteds));

同步代码基本不需要 loading 的，
你试试看看能不能降低运算时间。