无法映射Firebase数据库项目

Question

编辑：包括codepen：https://codepen.io/hugerobots/pen/YeMWbY?editors=1010

以下是将数据库项映射到每个子数据库项的<ul>的非常简单的练习。

渲染后的错误（一切正常，直到我实现下面的map）。

未捕获的TypeError：无法读取未定义的属性“map”

我跟随的示例是几年之久，因此我可能会对我正在关注的内容进行一些更改，并对实际Firebase文档中的更新说明提出警告。 https://css-tricks.com/firebase-react-part-2-user-authentication/

我转身的地方可能是重复使用items和item参考数据库中的实际项目以及在下面的代码中使用该术语。

handleSubmit(e) {
    e.preventDefault();
    const itemsRef = firebase.database().ref('vendors');
    const item = {
        name: this.state.user.displayName || this.state.user.email,
        email: this.state.user.email,
        vendorName: this.state.user.vendorName,
        vendorType: this.state.user.vendorType
    }
    itemsRef.push(item);
    this.setState({
        username: '',
        email: '',
        vendorName: '',
        vendorType: ''
    });
}

componentDidMount() {
    // retrieve data
    const itemsRef = firebase.database().ref('vendors');
    itemsRef.on('value', (snapshot) => {
        let items = snapshot.val();
        let newState = [];
        for (let item in items) {
            newState.push({
                id: item,
                name: items[item].username,
                email: items[item].email,
                vendor: items[item].vendorName,
                vendtype: items[item].vendorType
            });
        }
        this.setState({
            items: newState
        });
    });
}

问题map：

<ul>
{this.state.items.map((vendors) => {
    return (
        <li key={vendors.id}>
        <h2>{vendors.name}</h2>
        <p>Vendor Name: {vendors.vendorName}
            {vendors.name === this.state.user.username || vendors.user === this.state.user.email ?
                <button onClick={() => this.remoteItem(vendors.id)}>Remove Item</button> : null}
            </p>
        </li>
    )
})}
</ul>

Answer 1

您可以在构造函数中设置空状态items数组，以避免undefined中的render()error：

this.state = { items: [] }

这只是一个想法，因为忽略了构造函数的样子。

Answer 2

使用React，此组件安装并加载jsx。 this.state.items尚不存在或为空。您可以使用条件。

{this.state.items.length > 0 ?
{this.state.items.map((vendors) => {
    return (
        <li key={vendors.id}>
        <h2>{vendors.name}</h2>
        <p>Vendor Name: {vendors.vendorName}
            {vendors.name === this.state.user.username || vendors.user === this.state.user.email ?
                <button onClick={() => this.remoteItem(vendors.id)}>Remove Item</button> : null}
            </p>
        </li>
    )
})} 
: <h1>Asynccccc</h1> }

我想你可能有一些异步问题。试试这个。

componentDidMount() {
// retrieve data
let items;
let newState = [];
const itemsRef = firebase.database().ref("vendors");
itemsRef
  .on("value", snapshot => {
    items = snapshot.val();
    for (let item in items) {
      newState.push({
        id: item,
        name: items[item].username,
        email: items[item].email,
        vendor: items[item].vendorName,
        vendtype: items[item].vendorType
      });
    }
  })
  .then(() => {
    this.setState(
      {
        items: newState
      },
      function() {
        console.log(
          "Maybe you were setting state before your for each finishes"
        );
      }
    );
  });

}

Answer 3

尝试&&（和）运算符

 {this.state.items.length > 0 && this.renderItems()}

哪里

renderItems= () => {
   return this.state.items.map((vendors) => {
    return (
        <li key={vendors.id}>
        <h2>{vendors.name}</h2>
        <p>Vendor Name: {vendors.vendorName}
            {vendors.name === this.state.user.username || vendors.user === this.state.user.email ?
                <button onClick={() => this.remoteItem(vendors.id)}>Remove Item</button> : null}
            </p>
        </li>
    )
})
}