react-hooks - 验证后 React Hook useCallback()？

问题描述

因此，我在这里阅读了一些提供示例的线程，但对于我的用例，我似乎无法理解。

我有一个带有提交按钮的表单。我想验证文本字段值之一，然后才想执行 useCallback。这是提交处理程序，handleSubmit，它是从点击表单的提交按钮触发的。

const handleSubmit = useCallback(
    async event => {
      event.preventDefault();
      const data = await fetch('/video/token', {
        method: 'POST',
        body: JSON.stringify({
          identity: username,
          room: roomName
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => res.json());
      setToken(data.token);
    },
    [roomName, username]    
  );

这是我要调用的验证器。只有当返回值为真时，我才想执行 useCallback。

function IsAuthCodeValid() {
    var hashedAuthCode = roomName.split('').reduce((prevHash, currVal) =>
                (((prevHash << 5) - prevHash) + currVal.charCodeAt(0)) | 0, 0).toString();
    if (authCode === hashedAuthCode) {      
        return true;
    }
    else {
        return false;
    }
  };

完成此任务的最快方法是什么？坦率地说，我是 React Hooks 的新手，所以我才刚刚开始深入研究。任何帮助将不胜感激！

标签： react-hooks

为此，您可以创建一个调用验证函数 ( IsAuthCodeValid) 的函数，然后调用提交函数 ( handleSubmit)。

const formSubmit = (event) => {
  const isValid = IsAuthCodeValid();
  if (isValid) {
    handleSubmit(event);
  }
};

您的表单现在调用此函数

<form onSubmit={formSubmit} ...

要解决此问题，请检查您是否在某个条件或任何其他条件之后React Hook "useCallback" is called conditionally定义您的handleSubmit函数。if

钩子的规则之一是它们不应该被有条件地调用，如果你的组件有一个可能“在”钩子定义之前“返回”的条件，那么它是不允许的。

您可以在此处了解有关钩子的更多信息：https ://reactjs.org/docs/hooks-rules.html

react-hooks - 验证后 React Hook useCallback()？

问题描述

解决方案

推荐阅读