Есть ли правильный способ использовать ловушку useNavigation () с зависимостями useEffect ()?

Question

Я пытаюсь взаимодействовать с реагирующей навигацией, используя хук useNavigation () в ответ на обратный вызов, который я регистрирую в useEffect ().Линтер предупреждает меня, что useEffect () отсутствует зависимость.Если в качестве зависимости добавить хук навигации, эффект будет работать непрерывно.Я пытаюсь избежать этого и задаюсь вопросом, существует ли правильный путь, кроме игнорирования ошибки линтера.

Если массив зависимостей не приводит к тому же поведению, при котором эффект непрерывно срабатывает.

Этоможет быть основная проблема, связанная с тем, как работает ловушка useNavigation () из пакета response-navigation-hooks.

function MyComponent() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.navigate('Home');
    }, []);
}

В результате:

React Hook useEffect has a missing dependency: 'navigation'. Either include it or remove the dependency array.

Answer 1

Просто самоуверенное предположение: это больше вопрос, касающийся вашей "архитектуры".

Например: не имеет ли смысла для пользовательского хука useNavigation возвращать функцию быть вызванным "пользователем" вместо объекта со всеми его функциональными возможностями?

Вот пример:

const useNavigation = () => {
  const [routes, setRoutes] = useState(null)
  ...

  const navigate = (destination: string) => {
    console.log("navigated to ", destination)
  }

  return {navigate, routes}
}

function App() {
  const {navigate} = useNavigation();

  return (
    <div className="App">
      <h1>Parent</h1>
      <button onClick={() => navigate("Home")}>Navigate me!</button>
    </div>
  );
}

Рабочие коды: box: https://codesandbox.io/s/usenavigation-95kql

---

Если вы все же хотите сохранить эту «архитектуру», вы можете использовать useRef хук следующим образом:

const navigation = useRef(useNavigation());

useEffect(() => {
    navigation.current.navigate("Home");
}, []);