Почему в массив не добавляются все коллекции?

Question

[Игорь]

Почему в масив не добавляются все колекции, хотя в консоле перебираются все.

const [data, setData] = useState([]);
const takeData = async () => {
    const UID = getAuth().currentUser.uid;
    const db = getFirestore();
    const q = query(collection(db, "users", UID, "statistic"));

    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      console.log(doc.data());
      setData([...data, doc.data()]);
    });
  };
  useEffect(() => {
    takeData();
  }, []);

Answer 1

[Alexandroppolus]

ты на каждой итерации forEach добавляешь doc.data() к пустому массиву data.

const [data, setData] = useState([]);
const takeData = async () => {
    const UID = getAuth().currentUser.uid;
    const db = getFirestore();
    const q = query(collection(db, "users", UID, "statistic"));

    const querySnapshot = await getDocs(q);
    setData(querySnapshot.map((doc) => doc.data()));
  };
  useEffect(() => {
    takeData();
  }, []);

Comments

[Игорь]

Ваш пример не работает(
Почему пустой? я же каждый раз добавляю имеющейся в масиве данные через троеточие

[Alexandroppolus]

Игорь,

Ваш пример не работает

а какая ошибка? querySnapshot - это вообще что такое? массив?

Почему пустой?

потому что setData выставляет новое значение "где-то там внутри", но переменная data не меняется. Вот когда случится новый рендер, то в нем уже будет новое значение

[Alexandroppolus]

как вариант, можно попробовать так сделать:

...
    querySnapshot.forEach((doc) => {
      console.log(doc.data());
      setData((d) = [...d, doc.data()]);
    });
...

теперь в setData передается функция, в которой параметр d - актуальное, измененное значение. Но лучше всего сформировать весь массив и передать однократно. Возможно, будет работать так - если колбэк в forEach отрабатывает синхронно:

...
    const arr = [];
    querySnapshot.forEach((doc) => {
      console.log(doc.data());
      arr.push(doc.data());
    });
    setData(arr);
...

[Игорь]

Alexandroppolus, querySnapshot это ссылка на колекцию в firebase
Странно, потому что я гуглил и в статье был код как у меня
Ошибка

Uncaught (in promise) TypeError: querySnapshot.map is not a function
at takeData

[Александр]

Игорь, https://beta.reactjs.org/reference/react/useState#...

[Игорь]

Alexandroppolus,

const arr = [];
    querySnapshot.forEach((doc) => {
      console.log(doc.data());
      arr.push(doc.data());
    });
    setData(arr);

вот так заработало, спасибо)

[Игорь]

Александр, я знаю про это, так не работало пробовал, но уже все решил