Дождитесь Cloud Firestore перед рендерингом

Я пытаюсь получить коллекцию компьютеров и поместить их в массив, чтобы я мог отобразить их с помощью карты в моем операторе возврата компонента responsejs. Однако массив всегда пуст. Я предполагаю, что это как-то связано с async / await, но я не могу этого понять.

Вот код.


function Home()
{
    let computers = [];

    firestore.collection("computers").get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            let data = doc.data();
            data.uid = data.id;
            computers.push(data);
        })
    })

    console.log(computers.length); // Always returns 0

    return (
        // Using computers.map to render every computer into its own component
    );

}

export default Home;

Да, это из-за этого. Для этого вам нужно будет использовать useState. Документы: reactjs.org/docs/hooks-state.html   —  person crlegdn    schedule 12.01.2021

См. также:  Запрос Firebase ничего не возвращает
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. crlegdn

    Здесь вам действительно нужно начать с основ и ознакомиться с React Hooks. Я дам вам код вместе со ссылкой на песочницу, чтобы вы начали.

    Идея состоит в том, чтобы получить ваши компьютеры, а затем обновить состояние вашего компонента с помощью полученного значения, что вызовет повторное преобразование компонента со значением состояния, установленным для массива ваших компьютеров. Вот идея: (Песочница: https://codesandbox.io/s/modern-river-p8f92?file=/src/App.js).

    import React from "react";
    import "./styles.css";
    
    const getComputers = () => { //This will sumulate your call to get computers.
      return new Promise(resolve => {
        setTimeout(() => resolve(['computer1', 'computer2']), 1000)
      })
    }
    
    function App() {
      const [computers, setComputers] = React.useState([]);
    
      React.useEffect(() => {
          getComputers().then(computers => setComputers(computers))
      }, [])
    
      return (
        <div className="App">
          <h1>Computers</h1>
          {computers.map((item, i) => <div key={i}>{item}</div>)}
        </div>
      );
    }
    
    export default App;
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: