Как реализовать хук для componentDidMount с реагировать на роутер?

Question

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

 componentDidMount() {
    logNavego(this.props.history.location.pathname + 
    this.props.history.location.search )
    this.unlisten = this.props.history.listen(location => {
      logNavego(location.pathname + location.search)
    })
  }

Answer 1

Поскольку вы хотите вызвать history.listen только при первоначальном рендеринге и очистить слушатель при размонтировании, вы можете вызвать useEffect с empty array в качестве массива зависимостей и вернуть функцию очистки

useEffect(() => {
    logNavego(props.history.location.pathname + props.history.location.search )
    const unlisten = props.history.listen(location => {
      logNavego(location.pathname + location.search)
    });
    return () => {
       unlisten();
    }
  }, [])

Вы можете обратиться к useEffect документам для получения более подробной информации

Answer 2

Попробуйте это.

import React, { useEffect } from 'react';

useEffect(() => {
  // all your code that you put in  componentDidMount method
}, [])

в использованииЭффект, который мы используем []. что [] похоже на componentDidMount.

Теперь, если вы хотите использовать componentDidUpdate, вам нужно передать состояние в [].

Например если в это время счетчик обновляется, вы хотите что-то изменить, тогда посмотрите этот код.

useEffect(() => {
  // all your code goes here related to count state.
}, [count])

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