Question

因此，我在此处阅读了一些提供示例的线程，但是对于我的用例，我似乎无法全神贯注。

我有一个带有“提交”按钮的表单。我要验证文本字段值之一，然后才要执行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]    
  );

这是我要调用的验证器。只有在返回值为true时，我才要执行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的新手，所以我才刚刚开始研究。任何帮助将不胜感激！

Answer 1

为此，您可以创建一个函数，该函数调用您的验证函数（IsAuthCodeValid），然后调用您的Submit函数（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

验证后反应Hook useCallback（）吗？

1 个答案: