React перехватывает прослушиватель событий при каждом рендере (ошибка исчерпывающего ввода-вывода) - PullRequest
Новая
       5

React перехватывает прослушиватель событий при каждом рендере (ошибка исчерпывающего ввода-вывода)

1 голос
/ 07 июня 2019

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

Если я удаляю incrementCount из списка зависимостей и оставив его как пустой массив [], я получаю ошибку linting react-hooks/exhaustive-deps, однако она не срабатывает после первоначального рендеринга. 

function useApp({ incrementCount, count }) {
  console.log(count);

  // this gets triggered on every render
  useEffect(() => {
    console.log('add event listener');
    window.addEventListener('click', incrementCount);
    return () => {
      window.removeEventListener('click', incrementCount);
    };
  }, [incrementCount]);
}

function App() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    console.log('increment');
    setCount(prevCount => prevCount + 1);
  }

  useApp({ incrementCount, count });

  return <div>click</div>;
}

1 Ответ

2 голосов
/ 07 июня 2019

Я думаю, вы можете использовать useCallback API от реакционных крючков https://reactjs.org/docs/hooks-reference.html#usecallback

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    console.log('increment');
    setCount(prevCount => prevCount + 1);
  }, [])

  useApp({ incrementCount, count });

  return <div>click</div>;
}
...