useState не обновляет массив после вызова API

Question

У меня есть следующий код:

const ManageModules: React.FC < IProps > = ({
    history
  }) => {
    const [CurrentlyRegisteredModules, setCurrentlyRegisteredModules] = useState(null as unknown as any[])
    const [SelectedModule, setSelectedModule] = useState(null as unknown as any);

    useEffect(() => {
          userModuleService.addUserModule(SelectedModule.id)
            .subscribe(res => {                 
              setCurrentlyRegisteredModules(x => {
                x.push(new RegisteredModules(res.data));
                return x;
              });
            });
        })
  },
  [SelectedModule]);

 useEffect(() => {
    console.log('Current Reg Change');
}, [CurrentlyRegisteredModules]);
}

Каждый раз, когда SelectedModule изменяется, прослушивание его эффекта работает нормально и возвращает значение. Затем я извлекаю sh результат в массив CurrentRegisteredModules , используя setCurrentlyRegisteredModules .

Однако проблема, с которой я сталкиваюсь, заключается в том, что эффект прослушивания CurrentRegisteredModules не запускается, но когда я проверяю CurrentRegisteredModules в консоли, он показывает, что результат был добавлен в область.

Может кто-нибудь определить, что я могу делать неправильно.

Answer 1

Изменить следующий код

setCurrentlyRegisteredModules(x => {
  x.push(new RegisteredModules(res.data));
  return x;
});

на

setCurrentlyRegisteredModules(x => {
  let newX = [...x]
  newX.push(new RegisteredModules(res.data));
  return newX;
});

Не изменять x.