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 都会更改，监听它的效果会很好，并返回一个值。然后，使用 setCurrentlyRegisteredModules 将结果推送到数组 CurrentlyRegisteredModules 中。

但是，我面临的问题是监听 CurrentlyRegisteredModules 的效果没有触发，但是当我在控制台中检查 CurrentlyRegisteredModules 时，表明结果已添加到该地区。

谁能识别我可能做错了什么。

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。

调用API后useState不更新数组

1 个答案: