时间戳

首页 > 解决方案 > 调用 API 后 useState 不更新数组

reactjs - 调用 API 后 useState 不更新数组

问题描述

我的代码如下：

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将结果推送到CurrentRegisteredModules数组。

但是，我面临的问题是没有触发收听CurrentRegisteredModules的效果，但是当我在控制台中检查CurrentRegisteredModules时，它显示结果已添加到该区域。

谁能确定我可能做错了什么。

标签： reactjsreact-hooks

解决方案

更改以下代码

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

到

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

不要变异x。

推荐阅读