кастомный хук выполняется более одного раза - PullRequest
Новая
       120

кастомный хук выполняется более одного раза

0 голосов
/ 05 августа 2020

Я боролся с использованием пользовательского хука с useEffect, но иногда он запускался более одного раза, может быть, 2 или 3 раза, но у меня действительно нет направления для начала, я знаю, что пользовательский хук может запускаться каждый раз, когда компонент повторно обработан, но у меня есть проверка флага внутри моего хука и useEffect, у которого есть список зависимостей, почему он все еще делает один и тот же вызов снова и снова? 

// custom hook
const useCustomFetch = (startLoad, user) => {
   const hadError = useSelector(state => return state.hadError);
   useEffect(() => {
      // define the async function inside useEffect
      const asyncFetch = async() => {
         const data = await loadingFromApi(user.id, user.emailAddress);
         dispatch(loadwebsite(data)); 
      }

      console.log('useCustomFetch startLoad', startLoad); //I can see two true here
      if(startLoad) {
         asyncFetch();
         dispatch(loadComplete());
      }
   }, [startLoading, dispatch, hadError, loadingFromApi]);
}

// main component
const main = () => {
   const [selectionChanged, setSelectionChanged] = useState(false);
   const [loadData, setLoadData] = useState(false);

   useEffect(() => {
     if(selectionChanged) {
       setLoadData(true); // to trigger custom hook
       setSelectionChanged(false) // to avoid useEffect execute again
     }
   }, [selectionChanged]);
  
   const loadDone = useCustomFetch(loadData, user);

   const selectChange = () => {
     setSelectionChanged(true);
   }
}

Моя идея состоит в том, чтобы пользователь переключал выберите раскрывающийся список, установите для моего локального состояния selectionChanged значение true, которое вызовет мой useEffect, а useEffect установит для моего локального состояния loadData значение true, что вызовет мой настраиваемый хук. и поскольку я передаю флаг в список зависимостей моего настраиваемого хука, он должен выполняться только один раз.

Но я вижу, что в моей сети 2 одинаковых запроса, иногда 3 одинаковых запроса, мне было интересно, потому что у меня есть 2 setState в моем useEffect, но у меня есть чтобы сбросить условный флаг, и он не установит для данных загрузки снова значение true, тогда почему и как мне диагностировать такую ​​проблему?

...