typescript - ReactJS+FireStore-tietojen kartoitusongelma

Kirjoitan pientä ohjelmaa noutaakseni kategoriat Firestore-tietokannasta ja näyttääkseni ne verkkosivulla listana.

Koodini näyttää tältä:

class Category extends Component {
  constructor() {
    super();
    this.state = {'Categories': []}
  }
  render() {
    let categoryList = null;
    if (Array.isArray(this.state.Categories)) {
      console.log(this.state.Categories);
      categoryList = this.state.Categories.map((category) =>  {
        return <li>{category.name}</li>
      });
    }
    return(
      <ul>{categoryList}</ul>
    );
  }
  componentWillMount() {
    // fetch the data from the Google FireStore for the Category Collection
    var CategoryCollection = fire.collection('Category');
    let categories = [];
    CategoryCollection.get().then((snapshot)=> {
      snapshot.forEach ((doc) => {
        categories.push(doc.data());
      });
    }).catch((error) => {
      console.log("Error in getting the data") 
    });
    this.setState({'Categories': categories});
  }
}

Voin hakea tiedot ja jopa täyttää this.state.Categories, mutta map-funktiota ei suoriteta.

Console.log-lause tuottaa arvotaulukon, mutta renderöinnissä käytettävä map-funktio ei suoritudu. Mitä ajatuksia?

Console.log-tulos:

Vastaus #1

Sinulla on virhe tietojen hakemisen käsittelyssä. Viimeisellä rivillä categories on edelleen tyhjä, joten se laukaisee setState:n tyhjällä tietojoukolla. Sen pitäisi olla jotain sellaista

componentWillMount() {

    fire.collection('Category').get()
        .then(snapshot => {
            const categories = snapshot.map(doc => doc.data());
            // sorry, but js object should be pascal cased almost always
            this.setState({ categories }); 
         })
         .catch(error => {
             console.log("Error in getting the data") 
         });

}

Vastaus #2

Palauta tiedot vain, jos tiedot ovat olemassa. Yksinkertaisin tapa tehdä tämä on korvata <ul>{categoryList}</ul> seuraavalla: <ul>{this.state.categories && categoryList}</ul>