Как вызвать крючок внутри крючка? (или альтернатива, поскольку это не может быть сделано: D)

Question

поэтому я создал пользовательский хук, который должен быть запущен при просмотре страницы

, поэтому я подумал, что могу просто вызвать этот хук внутри useEffect, но это не выглядит возможным

так кто-нибудь знает, как я могу это сделать?

при запуске Google Analytics он будет запускаться, поэтому он должен быть загружен. это возможно?

хорошо, вот пример

export const usePageView = props => {
    const counter = useSelector(state => state) // useSelector coming from react redux
    console.log(counter, '===')
}

import { usePageView } from '../myhooks'

export const myComponent = () => {
   useEffect(() => {
      usePageView() // get error saying Error: Invalid hook call.
},[])

}

Answer 1

Правила правил хуков устанавливают вызовы хуков только с верхнего уровня функции.

Не вызывать хуки внутри циклов, условий или вложенных функций. Вместо этого Всегда используйте Hooks на верхнем уровне вашей функции React. Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента. Это то, что позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect.

Вы не можете составить пользовательский хук в вызове useEffect, потому что это по определению «вложенная функция» , Вместо этого вы должны создать свои пользовательские хуки, чтобы они включали все хуки или useEffect вызовы, которые им необходимы для внутри пользовательского хука (но на верхнем уровне пользовательского хука).

https://reactjs.org/docs/hooks-rules.html#only -call-hooks-at-the-level *

Было бы полезно иметь более точный c код того, что точно вы пытаюсь сделать, потому что в настоящее время ваш вопрос слишком расплывчат, чтобы дать более прямой ответ.

Answer 2

Вам не нужно здесь useEffect.

export const usePageView = props => {
    const counter = useSelector(state => state) // useSelector coming from react redux
    console.log(counter, '===')
}

import { usePageView } from '../myhooks'

export const myComponent = () => {
      usePageView();
}

Это должно работать.