как поместить итеративные операторы в useEffect?

Question

    useEffect(()=>{ 

        while(itemlen===0)
        {
                fire.database().ref().child(path)
            .on("value",
            (snapshot)=>{
              let item=snapshot.val()
              console.log(item)
              if(item!==null){
                let array=[];
                Object.
                keys(item)
                .forEach(i=>array.push(item[i]));
                setCard1(array);
            }
            console.log(item,"item")
            if(item!==null)
           { 
            console.log(Object.keys(item).length,"item length")
            itemlen=7  //length of object I get from valid result
            }
             else {itemlen=0}
            })
           } 
            console.log(itemlen,'itemlen') 
      },[prefVar]);

мой код внутри для l oop выбирает случайный путь и извлекает этот путь. Проблема только в том, что иногда путь пуст, поэтому я хочу использовать l oop для повторного выполнения кода, пока не получу допустимый путь.

Проблема в том, что мое приложение зависает, когда дело доходит до этой части и застревает. Я предполагаю, что это из-за того, что l oop внутри useEffect и код работает нормально, пока l oop, но дает пустые результаты иногда. Есть ли лучший способ сделать это?

Answer 1

Вы создаете бесконечное число l oop, поэтому нормально останавливать его.

Время от времени вы должны poll источник данных, пока не получите свою информацию. Это можно сделать изнутри useEffect.

Попробуйте что-то вроде этого

useEffect(()=>{
  const getData = () => {
    fire.database().ref().child(path)
        .on("value",
        (snapshot)=>{
          let item=snapshot.val()
          console.log(item)
          if(item!==null){
            let array=[];
            Object.
            keys(item)
            .forEach(i=>array.push(item[i]));
            setCard1(array);
         }
         console.log(item,"item")
         if(item!==null)
         { 
          console.log(Object.keys(item).length,"item length")
          itemlen=7  //length of object I get from valid result
          clearInterval(interval) //stop polling for results
         }
         else {itemlen=0}
        })
     }
    const interval = setInterval(getData, TIMEOUT_INTERVAL)
    return () => clearInterval(interval);
  },[prefVar]);

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

TIMEOUT_INTERVAL - это время ожидания в мс между вызовами.