在React函数组件内调用React挂接

mefy6pfw 于 2023-03-03 发布在 React

关注(0)|答案(1)|浏览(121)

import { useOptInOut } from "../../hooks/useOptInOut/useOptInOut";
import withTranslation, { WithTranslationComponentProps } from '../../hoc/WithTranslation';

const DataConsent = (props: WithTranslationComponentProps) => {
    const optStatusResponse = useOptInOutStatus();
    const enable = optStatusResponse.value?.enabled;

  const selectOptType = () => {
       if (enable) {
            setOptInOut(false);
        } else if (!enable) {
            setOptInOut(true);
        }
  }

   const onSubmit = () => {
      const response = useOptInOut(optType);
     }

return (

               <section className="app-section-container">
                <div className="radio">
                        {!enable && <label>
                            <input type="radio" value="optIn" onChange={selectOptType} />
                            <b>Opt-in: </b>
                        </label>}

                          {enable && <label>
                            <input type="radio" value="optOut" onChange={selectOptType} />
                            <b>Opt-out:  </b> 
                        </label>}

             <div className="cta-buttons">
                    <button className={`ui primary button`} onClick={onSubmit}>
                        SUBMIT
                    </button>
                </div>

                <section>
)

export default withScrollTop(withTranslation(DataConsent as any));

你好，
我尝试在单击提交按钮时进行调用，此调用将使用钩子进行POST API调用。
我的问题是，我不能从我的函数组件调用钩子。请看一下我的代码，让我知道你是否能帮助我。
这是我遇到的错误信息。
无法在回调内部调用React Hook "useOptInOut"。必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks中调用React Hook。

react-native

来源：https://stackoverflow.com/questions/75538099/calling-react-hook-inside-react-function-component

1条答案

按热度按时间

sdnqo3pr1#

当您尝试在函数内部或组件顶级之外的任何其他位置使用React hook时，预期会出现此错误。
问题是：

const onSubmit = () => {
  const response = useOptInOut(optType);
}

如果你的钩子依赖于optType，然后马上执行给你一个响应，那么你需要稍微重构钩子，让它返回一个回调函数。
更新你的钩子，看起来更像这样：
useOptInOut.ts

import { useCallback } from 'react';

const useOptInOut = () => {
  const getOptInOut = useCallback((optTypes) => {
    // your normal call logic moved to here...
    const response = await ...;
    return response;
  }, [optTypes]);
  
  return getOptInOut;
};

现在，在组件内部，您可以正确地将useOptInOut挂钩放到需要的顶层位置：

const DataConsent = (props: WithTranslationComponentProps) => {
    const optStatusResponse = useOptInOutStatus();
    const getOptInOut = useOptInOut(); // <--- get the callback, but don't execute yet
    // ...
};

现在更新您的onSubmit：

const onSubmit = async () => {
  const response = await getOptInOut(optType);
}

赞(0）回复(0）举报 2023-03-03

我来回答

在React函数组件内调用React挂接

1条答案

相关问题

热门标签

最新问答