为什么我的功能组件无法重新渲染？

Question

我有一个功能组件，单击此按钮即可运行此功能：

const dineroAsignado = parseFloat((dependencia.porcentaje_asignado * presupuesto.cantidadPresupuesto / 100).toFixed(2)) + 1000;
const centrosTrabajo = dependencias;
const index = centrosTrabajo.findIndex(ct => ct.id_centro_trabajo === dependencia.id_centro_trabajo);
centrosTrabajo[index].porcentaje_asignado = dineroAsignado * 100 / presupuesto.cantidadPresupuesto;
setDependencias(centrosTrabajo);

一切正常，但该组件不会在更新时重新提供。 我不知道为什么。

能帮我吗？ 谢谢！

Answer 1

问题

您要更改状态引用，而不是创建新的引用并对其进行更新。

const centrosTrabajo = dependencias; // <-- state reference

const index = centrosTrabajo.findIndex(
  (ct) => ct.id_centro_trabajo === dependencia.id_centro_trabajo
);
centrosTrabajo[index].porcentaje_asignado =
  (dineroAsignado * 100) / presupuesto.cantidadPresupuesto; // <-- mutation!!

setDependencias(centrosTrabajo); // saved reference back in state

解决方案

为状态创建一个新的数组引用。最简单的方法是先对数组进行浅复制。您还应该将元素浅复制到新的对象引用中。

const centrosTrabajo = [...dependencias]; // <-- create new array reference

const index = centrosTrabajo.findIndex(
  (ct) => ct.id_centro_trabajo === dependencia.id_centro_trabajo
);

centrosTrabajo[index] = { // <-- create new object and copy existing
  ...centrosTrabajo[index],
  porcentaje_asignado: (dineroAsignado * 100) / presupuesto.cantidadPresupuesto,
};

setDependencias(centrosTrabajo); // <-- update state with new reference