调用 API 后 useState 不更新数组

Question

I have my code as follows:

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

Everytime SelectedModule changes, the effect listening to it runs fine and returns a value. I then push the result to array CurrentlyRegisteredModules using setCurrentlyRegisteredModules .

However, the problem I am facing is that the effect listening to CurrentlyRegisteredModules is not triggered but when i inspect CurrentlyRegisteredModules in console, it shows that the result was added to the area.

Can anyone identify what I could be doing wrong.

Answer 1

Change following code

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

to

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

Do not mutate x .