В кастомном хуке функция setState не обновляет state

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

const useGetLoadData=(whatyouwant)=>{
    const auth=getAuth()
    const storage=getStorage()
    const [dataPosts,setDataPosts]=useState([])
    const db=getFirestore()
    const [dataImg, setDataImg]=useState([])
    const getLoad=async(whatyouwant) => {
      if(whatyouwant==='posts'){
        const arr=[]
        const querySnapshot = await getDocs(collection(db, "posts"));
        querySnapshot.forEach((doc) => {
          arr.push(doc.data())
          arr.sort((prev, next) => next.index - prev.index)
          setDataPosts([...dataPosts, doc.data()])
          console.log(dataPosts)
        })
      }
      if(whatyouwant==='storageImg'){
        const imagesListRef = ref(storage,'images'+auth.currentUser.uid+'/');
        listAll(imagesListRef).then((response) => {
            response.items.forEach((item) => {
                getDownloadURL(item).then((url) => {
                  setDataImg((prev) => [...prev, url]);
                });
            });
        });
      }
    }  
    useEffect(() => {
      getLoad(whatyouwant)
    }, [])
    
     
}
export default useGetLoadData

Ответы (1 шт):

Автор решения: ksa

Ты про вот это место?

setDataPosts([...dataPosts, doc.data()])
console.log(dataPosts)

При работе со стейтом нужно помнить что это действо асинхронное. Т.е. твой вызов

setDataPosts([...dataPosts, doc.data()])

Сразу не изменит значение dataPosts...

Для работы со стейтом в цикле можно использовать СБ-функцию

setDataPosts(old => [...old, doc.data()])

Либо собрать данные в цикле и только после цикла их все записать один раз в стейт.

→ Ссылка