useHooks以两种不同的方式使用

Question

我使用钩子从后端获取数据。api基于一个参数给出2种不同的结果。在屏幕1上，我调用没有参数的钩子并获得结果。在屏幕2上，我想调用相同的钩子，但带一个参数到相同的API。

例如，当我在屏幕1上时，我得到员工列表(假设有10条记录)现在，当我导航到screen2并使用参数调用钩子时，我希望api能够执行，并给出20条记录。但是，来自api调用的响应数据已经在employees中从screen1获得，因此不会再次执行调度。见下一行

if (typeof employees === 'undefined' && !loader)

来克服这个问题,我认为使用标志传递给钩当我screen2和使用参数调用的api。但它最终会进入一个无限循环。有什么办法解决这个问题吗?

这是我的钩子:

const useEmployees = param => {
const dispatch = useDispatch()
const loader = useSelector(getLoader)
// Fetch all employees
const employees = useSelector(getEmpList)
useEffect(() => {
if (typeof employees === 'undefined' && !loader) {
dispatch(getEmployees(param))
}
}, [param, employees, dispatch, loader])
return { loader, employees }
}
export default useEmployees

Answer 1

不用问为什么[param, employees, dispatch, loader]是你的深度列表，或者为什么调度程序没有为你解决这个问题，一个总是可用的解决方案是简单地使用ref.

const paramRef = React.useRef(param);
// then in the useEffect:
useEffect(() => {
let paramChanged = false;
if (param !== paramRef.current) {
paramRef.current = param; // update the compare value
paramChanged = true;
}
if (paramChanged ...etc) {
// ...
}, [ ... ])