使用 React 钩子的冗余代码段

Question

有固定数量的设置决定组件是否应该可见，即：

const restrictions = {
  isLogged: true, // TRUE stands for: check if the condition is met
  hasMoney: true,
  didWinYesterday: false,
}

对于每个restrictions键，我用useState创建了一个状态，并用false初始化它们，例如：

const [isUserLogged, setIsUserLogged] = useState(false)
const [hasUserMoney, setHasUserMoney] = useState(false)
const [didUserWinYday, setDidUserWinYday] = useState(false)

接下来，我使用useEffect检查每个条件并useEffect更新状态：

useEffect(() => {
 const checkIfUserIsLogged = async () => {
   // calling an API to get boolean
   const isLogged = await API.call()

   setIsUserLogged(isLogged)
 }

  // If the restriction is set to false, ignore checking and set relevant state
  if (!restrictions.isLogged) {
    setIsUserLogged(true)
    return
  }

  checkIfUserIsLogged()
}, [restrictions.isLogged])

最后，我正在检查我是否应该渲染实际组件或者我应该像这样提前中断：

if (!isUserLogged) return <p>User not logged in.</p>

上面的useEffect代码和检查一共重复了 3 次。 每次重复都在进行不同的 API 调用并更新不同的状态，但整体结构保持不变。 我希望我能做得更干，但不知道如何开始。 欢迎任何提示，谢谢！

Answer 1

我将单个原子重构为一个内部处理效果的自定义useRestrictionState原子：

const restrictions = {
  isLogged: true, // TRUE stands for: check if the condition is met
  hasMoney: true,
  didWinYesterday: false,
};

function useRestrictionState(restrictionFlag, apiFunc) {
  const [flag, setFlag] = React.useState(undefined);
  useEffect(() => {
    if (!restrictionFlag) {
      setFlag(true);
    } else {
      apiFunc().then((result) => setFlag(result));
    }
  }, [restrictionFlag]);
  return flag;
}

function Component() {
  const isUserLogged = useRestrictionState(restrictions.isLogged, getLoginState);
  const hasUserMoney = useRestrictionState(restrictions.hasMoney, getUserMoney);
  const didUserWinYday = useRestrictionState(restrictions.didWinYesterday, getUserDidWinYesterday);
}

如果您总是需要所有这些，您可以自然地将其包装在另一个自定义钩子中：

function useUserRestrictionState(restrictions) {
  const isUserLogged = useRestrictionState(restrictions.isLogged, getLoginState);
  const hasUserMoney = useRestrictionState(restrictions.hasMoney, getUserMoney);
  const didUserWinYday = useRestrictionState(restrictions.didWinYesterday, getUserDidWinYesterday);
  return { isUserLogged, hasUserMoney, didUserWinYday };
}

function Component() {
  const { isUserLogged, hasUserMoney, didUserWinYday } = useUserRestrictionState(restrictions);
}

Answer 2

这是我的看法：

import { useState, useEffect } from 'react'

const useCheck = (condition: boolean, performCheck: () => boolean): boolean => {
  const [isConditionMet, setIsConditionMet] = useState<boolean>(false)

  useEffect(() => {
    const check = async () => {
      const isConditionMet = await performCheck()
      setIsConditionMet(isConditionMet)
    }

    if (!condition) {
      setIsConditionMet(true)
    }

    check()
  }, [condition, performCheck])

  return isConditionMet
}

export default useCheck

用法：

const isUserLogged = useCheck(restrictions.isLogged, () => true) // 2nd parameter should be an API call in my case