如何防止在React useEffect中进行不必要的API调用？

问题描述

我的HomeScreen组件包含用于获取当前用户的API调用。如果用户已更改，是否有办法让它仅进行API调用。到目前为止，如果我离开屏幕然后返回，它将进行API调用并显示加载程序，我认为这不是完美的用户体验，更不用说API请求是完全多余的，因为用户没有更改。 / p>

useEffect(() => {
    dispatch(userRequest({ userId,userRole }))
},[dispatch,userId,userRole]) 

我还尝试使用reselect从userId获取userRole和Redux并将我的HomeScreen组件包装在React.memo中，但是似乎每次都会重新渲染

这是我从Redux获取数据的方式

const userId = useSelector(selectUserId)
const userRole = useSelector(selectUserRole)

我的选择器：

const loginInfoSelector = (state: AppStateType) => state.loginInfo

export const selectUserId = createSelector(
  loginInfoSelector,(loginInfo) => loginInfo.id
)
export const selectUserRole = createSelector(
  loginInfoSelector,(loginInfo) => loginInfo.role
)

解决方法

我会尝试将dispatch从依赖项数组中删除为：

useEffect(() => {
   dispatch(userRequest({ userId,userRole }))
},[userId,userRole])

通过这种方式，只有userId或userRole发生更改时才会触发。