React Native: данные, полученные из firestore в функции asyn c, удаляются

Question

Я создаю собственное приложение React и взаимодействую с Firebase, а точнее с Firestore. Я использую функциональный компонент и пытаюсь получить данные при его установке. Я хочу сохранить эти данные как объекты в массиве, который позже буду использовать для отображения в плоском списке. Код, который я использую для этого, можно увидеть ниже:

const [myData, setMyData] = useState([]);

const app = props => {

   useEffect(() => {
       async function getData() {
         await firebase
           .firestore()
           .collection("data")
           .where("data_name", "==", "name")
           .get()
           .then((snapshot) => {
             snapshot.forEach((doc) => {
             let jsonObj = {
                date: doc.data().date,
                language: doc.data().lang,
                ... (more data)
             };
              setMyData([...myData, jsonObj]);
          });
        });
      }
    getData();

  }, []);


  ...
}

Написанный мной запрос работает правильно, и я могу получить данные, которые ищу. Однако после помещения всех jsonObj в мой массив с использованием setMyData у меня остается только один объект в моем массиве после того, как все завершает выполнение. Единственный объект в массиве myData, который остался в конце, - это тот, который был добавлен к нему последним. Кажется, что все остальные объекты, которые были добавлены ранее, каким-то образом были удалены. Почему это происходит?

Answer 1

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

Вам нужно создать массив, содержащий все данные, а затем setMyData за пределами этого для каждого l oop.

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

   useEffect(() => {

           async function getData() {
    let arr = [];
             await firebase
               .firestore()
               .collection("data")
               .where("data_name", "==", "name")
               .get()
               .then((snapshot) => {
                 snapshot.forEach((doc) => {
                 let jsonObj = {
                    date: doc.data().date,
                    language: doc.data().lang,
                    ... (more data)
                 };
               arr.push({...myData, jsonOb})
              });
                  setMyData(arr);
            });
          }
        getData();
    
      }, []);