Javascript 在168个对象的状态数组中使用map时，反应冻结1~2秒

在执行

axios.put

之后，当我尝试从对象的状态数组更新和属性时，就会出现问题

这是我的密码：

状态-使用效果

/。。。
const[志愿者，set志愿者]=useState（[]）；
//...
useffect（（）=>{
异步函数loadI志愿者（）{
应用程序编程接口
.get（'志愿者'）
。然后（响应=>{
const data=response.data.map（志愿者=>({
…志愿者，
已取消勾选：志愿者。已确认===null，
确认文本：志愿者。确认？'Deferido'：'Indeferido'，
CreatedDataFormatted:格式(
parseISO（志愿者创建数据），
“d'de'MMMM'/'yyyy”，
{
地点：pt，
}
),
}));
SET志愿者（数据）；
})
.然后（（）=>{
应用程序编程接口
.get（'部门'）
。然后（响应=>{
setDepartments（response.data）；
设置加载（假）；
})
.catch（（）=>{
错误(
“行动！巴士出现了问题，因为它是一项重要的技术革新，我们需要继续进行规划”
);
});
})
.catch（（）=>{
错误(
“行动！巴士出现了问题，因为它是一项重要的技术革新，我们需要继续进行规划”
);
});
}
如果（！isAdmin）{
history.push（'/dashboard'）；
}
加载志愿者（）；
调度（更改页面（“检查”）；
}, []); // eslint禁用线
//...

const updateDepartment=async（id，department\u id）=>{
试一试{
等待api.put（`志愿者/${id}/department`{
部门id，
});
赛特志愿者(
志愿者。地图（志愿者=>{
如果（志愿者id==id）{
志愿者.部门id=部门id；
返回志愿者；
}
返回志愿者；
})
);
为成功干杯（Departamento atalizado）；
}捕捉（错误）{
toast.error（'Erro ao atuanizar departamento'）；
}
};

如果我删除

指令，此方法将立即运行

但是当我尝试在志愿者数组/状态中进行映射时，应用程序会冻结1~2秒

为什么?

下面是react代码的其余部分，迭代志愿者数组

{志愿者。地图（（志愿者，索引）=>(
updateDepartment（志愿者id，e.target.value）
}
label=“Selecione seu sexo”
name=“性别”
>
{departments.map（选项=>(
{option.name}
))}
{志愿者.用户.名称}
{志愿者.用户.电话}
Líder:
{志愿者.user.leader_name}
{自愿者，你是谁(
handleConfirmation（索引、志愿者id、true）
}
>
德雷多
handleConfirmation（索引、志愿者id、false）
}
>
因德费里多
) : (
{志愿者。确认？'Deferido'：'Indeferido'}
)}
handleDelete（索引，志愿者id，true）}
>
排他性
))}
您可以使用回调函数更新状态

试试这个

const updateDepartment = async (id, department_id) => {
  try {
    await api.put(`volunteers/${id}/department`, {
      department_id
    });
    setVolunteers(prevState => {
      let Volunteers = prevState.map(volunteer => {
        if (volunteer.id === id) {
          volunteer.department_id = department_id;
          return volunteer;
        }
        return volunteer;
      });
      return Volunteers;
    });
    toast.success("Departamento atualizado");
  } catch (err) {
    toast.error("Erro ao atualizar departamento");
  }
};


若你们有一个很大的集合要映射，那个么难怪JS会锁定UI来执行你们的代码。可能尝试将其移动到异步执行？在您的情况下，他们通常使用分页，以便不同时从服务器接收所有数据。您能否提供您的
设置志愿者
实现？@Hao CherHong Yes要检查它是否因
映射（）
或
设置志愿者（）
而冻结，您可以执行：
设置超时（）=>{const new志愿者=志愿者.map（…）；setTimeout（set志愿者（new志愿者））}
用于分离映射的执行，并将志愿者设置为2个渲染周期。如果冻结发生在
set志愿者（）。