Блог

Главная - Вопросы по программированию - Почему мой функциональный компонент не перерисовывается?

Почему мой функциональный компонент не перерисовывается?

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть функциональный компонент, в котором я запускаю эту функцию при нажатии кнопки:

 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);

Все работает нормально, но компонент не выполняет повторный рендеринг при обновлении.
Я не могу понять, почему.

Не могли бы вы мне помочь? Спасибо!

Комментарии:

1. Мы обновляем состояние с setState() помощью , и это то, что обычно вызывает повторный render рендеринг. Я не вижу, чтобы это вызывалось?

2. Это функциональный компонент. setState — это последняя строка, setDependencias(centrosTrabajo).

3. ‘где я запускаю эту функцию при нажатии кнопки:’ — это не функция. пожалуйста, покажите полную функцию

Ответ №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