javascript - 无法映射 Firebase 数据库项目

Question

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

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

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

Uncaught TypeError: Cannot read property 'map' of undefined

我所关注的示例已有几年历史，因此我所关注的内容可能会发生一些变化，并需要注意实际 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 数组，以避免在 render() 中出现 undefined 错误:

this.state = { items: [] }

这只是一个想法，请忽略构造函数的外观。