Question

从firestore获取数据并尝试使用reactJS在表中呈现我无法呈现它。有人知道我是否有错误吗？

这是我的代码：

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>
    )
  }

制作一个 this.state.items 的console.log我得到这样的数据：

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)
   }); 
};

ReactJS不会在表中呈现数据

1 个答案: