主页 / 问题 / 1589122
Accepted
Zhihar
Asked:2024-08-01 16:28:07 +0000 UTC2024-08-01 16:28:07 +0000 UTC

React：使用组件中调用的函数中的钩子，而不是组件本身

  • 772

在React中需要从函数（不是组件，而是从组件调用函数）执行导航

创建了一个钩子：

// хук для выполнения навигации
export const useCustomNavigate = () => {
    const navigate = useNavigate();
    return navigate;
  };

我在函数内部使用它：

    // обработать 401 ошибка: не авторизованный запрос
    if (errMessage === 'Unauthorized') {
        // выйти из системы
        logout()

        // перейти на страницу авторизации
        const navigate = useCustomNavigate();

        navigate('/auth/login');
    }

我收到错误：

React Hook“useCustomNavigate”在函数“queryCustom”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。 React 组件名称必须以大写字母开头。 React Hook 名称必须以单词“use”开头react-hooks/rules-of-hooks

告诉我如何处理这个问题？

我不想在组件本身中执行此代码，在组件中我想使用 useNavigate() ，这样这样的东西（在很多地方使用）将被集中执行（代码将在实用程序中）作为一个单独的函数）并且最好不需要组件中的任何内容作为输入（如果可能的话）

告诉我如何解决这个问题？

聚苯乙烯

作为临时解决方案（我不知道它有多正确）我在 main.tsx 中使用（本质上是在主组件中）

const navigate = useNavigate();

我navigate把它放在一个单例中并navigate在整个项目中使用它

reactjs

1 个回答

  1. Best Answer

    在React中需要从函数（不是组件，而是从组件调用函数）执行导航

    看...该示例有一个钩子和一个函数。有一个选项可以将所有这些绑定到一个组件中。还有一个函数调用。那些。就好像一切都是你的。

    如果该字段中有值，Unauthorized则会“转换”到您的 URL。

    // хук для выполнения навигации
const useCustomNavigate = () => {
  //const navigate = useNavigate();
  const [navigate, setNavigate] = React.useState('');
  return [navigate, setNavigate]
};

//
function test(navigate) {
  return function(errMessage) {
    // обработать 401 ошибка: не авторизованный запрос
    if (errMessage === 'Unauthorized') {
      // выйти из системы
      //logout()
      // перейти на страницу авторизации
      //const navigate = useCustomNavigate();
      navigate('/auth/login');
    }
  }
}
//
function App() {
  const [val, setVal] = React.useState('')
  const [navigate, setNavigate] = useCustomNavigate()
  const fnc = test(setNavigate)
  const act = e => {
    const v = e.target.value
    fnc(v)
    setVal(v)
  }
  return <section>
    <input type='text' onChange={act} value={val} />
    <p>{navigate}</p>
  </section>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

    • 1

相关问题