reactjs - 我怎样才能使它成为一个包含钩子(Hook)的可调用 utils 函数？

Question

我目前正在使用 Apollo Client 的 useQuery和 useMutation钩子(Hook)在几个不同的组件中执行相同的功能。我不想重复逻辑，而是想创建一个辅助函数，可以将逻辑保存在一个地方。
这个问题是useQuery和 useMutation作为钩子(Hook)意味着它们不能仅仅作为函数存在于单独的文件中，而是需要是有效的 React 函数组件。
我开始尝试使某些功能发挥作用，但开始认为这可能无法完成。

  export function HandleFollow (props) {
      const [useFollowUser, { followedData, followError }] = useMutation(FOLLOW_USER);
      useFollowUser({ variables: { fromId: auth().currentUser.uid, toId: "userIDxyz"}, onCompleted: props.handleUserFollow(user, isFollowingAuthor)})
  }

是否可以在 React Hooks 中使用 util/helper 函数？提前致谢!
创建以下内容时，我收到 "Invalid hook call. Hooks can only be called inside of the body of a function component."我不知道为什么。
我认为这可能是由于从函数内部调用它，但我不知道如何避免这种情况。

export function useHandleFollow(props) {
  const { user, isFollowingUser } = props
  const [useFollowUser, { followedData, followError }] = useMutation(FOLLOW_USER);
  const [useUnfollowUser, { unfollowedData, unfollowedError }] = useMutation(UNFOLLOW_USER);
  const [followSuccess, setFollowSuccess] = useState(false)
  
  if(!isFollowingUser){
    useFollowUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: setFollowSuccess(true)})
  }else{
    useUnfollowUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: setFollowSuccess(true)})
  }
  return followSuccess
}

当我立即在我的组件中调用它(而不是从函数内部调用)时，它会继续无限地重新渲染:
这是组件中一些更完整的代码
在 Home.js 中:

const followed = useHandleFollow({ user: author, isFollowingAuthor })


export default  posts = (props) =>{
  let { post, excludeUser = false } = props
  let { author } = post
  let { date, things, isFollowingAuthor } = post
  let { profile_picture } = author
  let currentUser = auth().currentUser
  
  const [followed] = useHandleFollow({ user: author, isFollowingAuthor })
  
  return ()
}

这是在 follow.js 中，我将其导入为 import { useHandleFollow } from...

export function useHandleFollow(props) {
  const { user, isFollowingUser } = props
  const [followUser, { followedData, followError }] = useMutation(FOLLOW_USER);
  const [unfollowUser, { unfollowedData, unfollowedError }] = useMutation(UNFOLLOW_USER);
  const [followSuccess, setFollowSuccess] = useState(false)
  if(!isFollowingUser){
    followUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: () => setFollowSuccess(true)})
  }else{
    unfollowUser({ variables: { fromId: auth().currentUser.uid, toId: user.id}, onCompleted: () => setFollowSuccess(true)})
  }
  return [followSuccess]
}

Answer 1

当然是的!您可以创建自己的自定义 react Hook 。 React 钩子(Hook)使用一个相当简单的命名约定，“use-”前缀。

export function useHandleFollow(props) {
  const [useFollowUser, { followedData, followError }] = useMutation(
    FOLLOW_USER
  );
  useFollowUser({
    variables: { fromId: auth().currentUser.uid, toId: "userIDxyz" },
    onCompleted: props.handleUserFollow(user, isFollowingAuthor)
  });
}

Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

• ✅ Call Hooks from React function components.
• ✅ Call Hooks fromcustom Hooks (we’ll learn about them on the next page).

By following this rule, you ensure that all stateful logic in acomponent is clearly visible from its source code.

下一页是 Extracting a Custom Hook部分!

A custom Hook is a JavaScript function whose name starts with ”use”and that may call other Hooks.

编辑

Still receiving invalid hook usage.

export function useHandleFollow(props) {
  const { user, isFollowingUser } = props;
  const [useFollowUser, { followedData, followError }] = useMutation(
    FOLLOW_USER
  );
  const [useUnfollowUser, { unfollowedData, unfollowedError }] = useMutation(
    UNFOLLOW_USER
  );
  const [followSuccess, setFollowSuccess] = useState(false);

  if (!isFollowingUser) {
    useFollowUser({
      variables: { fromId: auth().currentUser.uid, toId: user.id },
      onCompleted: setFollowSuccess(true)
    });
  } else {
    useUnfollowUser({
      variables: { fromId: auth().currentUser.uid, toId: user.id },
      onCompleted: setFollowSuccess(true)
    });
  }
  return followSuccess;
}

我认为这里的问题是“mutate”函数的命名，您将其命名为不方便，就像另一个 React Hook 一样。 React Hook linting 规则正在解释 if (!isFollowingUser) {...}作为有条件地调用一个钩子(Hook)，这是无效的。给他们一个非 React-hook 的名字。 useFollowUser至 followUser和 useUnfollowUser至 unfollowUser .

export function useHandleFollow(props) {
  const { user, isFollowingUser } = props;
  const [followUser, { followedData, followError }] = useMutation(
    FOLLOW_USER
  );
  const [unfollowUser, { unfollowedData, unfollowedError }] = useMutation(
    UNFOLLOW_USER
  );
  const [followSuccess, setFollowSuccess] = useState(false);

  if (!isFollowingUser) {
    followUser({
      variables: { fromId: auth().currentUser.uid, toId: user.id },
      onCompleted: setFollowSuccess(true)
    });
  } else {
    unfollowUser({
      variables: { fromId: auth().currentUser.uid, toId: user.id },
      onCompleted: setFollowSuccess(true)
    });
  }
  return followSuccess;
}

Still render looping

useHandleFollow被称为每个渲染周期。我认为您的自定义钩子(Hook)在无条件更新 followSuccess 时会触发渲染循环。每个逻辑分支的状态。

export function useHandleFollow(props) {
  ...
  const [followSuccess, setFollowSuccess] = useState(false);

  // setFollowSuccess(true) called always
  if (!isFollowingUser) {
    followUser({
      variables: { fromId: auth().currentUser.uid, toId: user.id },
      onCompleted: setFollowSuccess(true)
    });
  } else {
    unfollowUser({
      variables: { fromId: auth().currentUser.uid, toId: user.id },
      onCompleted: setFollowSuccess(true)
    });
  }
  ...
}

每次调用钩子(Hook)时都会更新状态。您应该设置一个条件，即您希望何时运行此效果，即将该代码块放在 useEffect 中。带有对 isFollowingUser 的回调依赖的钩子(Hook).效果回调只会在 isFollowingUser 时运行。值会发生变化，而不是在组件呈现时发生变化。

export function useHandleFollow(props) {
  const { user, isFollowingUser } = props;
  const [followUser, { followedData, followError }] = useMutation(
    FOLLOW_USER
  );
  const [unfollowUser, { unfollowedData, unfollowedError }] = useMutation(
    UNFOLLOW_USER
  );
  const [followSuccess, setFollowSuccess] = useState(false);

  useEffect(() => {
    if (!isFollowingUser) {
      followUser({
        variables: { fromId: auth().currentUser.uid, toId: user.id },
        onCompleted: setFollowSuccess(true)
      });
    } else {
      unfollowUser({
        variables: { fromId: auth().currentUser.uid, toId: user.id },
        onCompleted: setFollowSuccess(true)
      });
    }
  }, [isFollowingUser]);

  return followSuccess;
}

Should I be returning something, like a set method or something, toaccept new props? Otherwise, how do I end up calling the hook withthose new props?

如果需要，您只需要从钩子(Hook)返回更新程序函数。每个渲染周期都会调用 React 钩子(Hook)，因此如果您将 props 传递给它们，那么它们将始终接收当前的 props。