Reactjs не отображает данные в таблице

Question

Получение данных из firestore и попытка рендеринга в таблице с реагировать. Я не могу рендерить это. Кто-нибудь знает, есть ли у меня ошибка?

Это мой код:

state = {
    items:[]
};

componentDidMount(){
    db.collection('items').get().then((snapShot) => {
        snapShot.docs.map( doc => {
           this.state.items.push({ id: doc.id, data: doc.data()});
        })
   }, error => {
       console.log(error)
   }); 
};

Таблица

render() {
    const { items, inputValue } = this.state;
    console.log(items)
    return (
        <React.Fragment>
            <Table hover className="text-center">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>  
                    { items && items !== undefined ? items.map((item, key) => (
                        <tr><td>{item.data.item}</td></tr>
                     )): null }
                </tbody>
             </Table>
        </React.Fragment>
    )
  }

Создание файла console.log из this.state.items Я получаю такие данные:

0:{id: "1NDr66bsRosASM7qYCJb", data: {…}}
1:{id: "2k0DKLVBlPxZDIQt7KPx", data: {…}}
2:{id: "4cADNojHNXqkFcnl52jw", data: {…}}

А с помощью карты я не могу получить доступ к данным.

Можете ли вы помочь мне, пожалуйста? Спасибо

Answer 1

В componentDidMount () вы должны установить свое состояние.

componentDidMount(){
    db.collection('items').get().then((snapShot) => {
       this.setState({
       items:snapShot.docs.map( doc => {
           return { id: doc.id, data: doc.data()}               
        });
       });
   }, error => {
       console.log(error)
   }); 
};