Javascript 无法映射Firebase数据库项

编辑：包括代码笔：

下面是一个非常简单的练习，它将数据库项映射为每个子数据库项的输出

渲染后出现错误（在我实现下面的

map

之前，一切正常）

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

我所遵循的示例已经有几年历史了，因此我所遵循的可能会有一些更改，并对实际Firebase文档中更新的指令进行了警告。

我的转变可能是重复使用

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

问题是地图：

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

{this.state.items.map（（供应商）=>{
返回(

{vendors.name}
供应商名称：{vendors.vendorName}
{vendors.name==this.state.user.username | | vendors.user==this.state.user.email？
this.remoteItem（vendors.id）}>Remove Item:null}


)
})}

您可以在构造函数中设置空状态

项

数组，以避免

呈现（）中出现
未定义的
错误：

这只是一个想法，因为忽略构造函数的外观。
您可以在构造函数中设置一个空状态
items
数组，以避免
render（）
中出现
未定义的
错误：

这只是一个想法，因为忽略构造函数的外观。
在这个组件装载jsx时，使用React。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> }

}
使用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> }

}
尝试和（和）运算符

在哪里

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

renderItems=（）=>{
返回此.state.items.map（（供应商）=>{
返回(

{vendors.name}
供应商名称：{vendors.vendorName}
{vendors.name==this.state.user.username | | vendors.user==this.state.user.email？
this.remoteItem（vendors.id）}>Remove Item:null}


)
})
}
尝试和（和）运算符

在哪里

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

renderItems=（）=>{
返回此.state.items.map（（供应商）=>{
返回(

{vendors.name}
供应商名称：{vendors.vendorName}
{vendors.name==this.state.user.username | | vendors.user==this.state.user.email？
this.remoteItem（vendors.id）}>Remove Item:null}


)
})
}
这对我来说很有意义，但我被抛出了以下错误：
模块构建失败：SyntaxError:这是一个保留字{This.state.items.length>0？>{This.state.items.map（（供应商）=>{
对于Clarity，第二个
this
是控制台错误指向整个组件的地方。您是将状态声明为构造函数（props）{super（props）this.state={}还是const state={}？检查上面的更新。我认为setSTate在newState为空时被调用这对我来说是有意义的，但我被抛出此错误：
模块构建失败：SyntaxError:这是一个保留字{this.state.items.length>0？>{this.state.items.map（（供应商）=>{
对于Clarity，第二个
this
是控制台错误指向整个组件的地方。您是将状态声明为构造函数（props）{super（props）this.state={}还是const state={}？检查上面的更新。我想当newState为空时，会调用setSTate。这会完整呈现页面！现在要让数据库打印值，例如
{vendorName}
您想显示
vendorName.vendorName
，但是当您将检索到的条目映射到状态时，没有
vendorName
字段，而是
vendorName
：
vendorName:items[项目].vendorName
。我建议您在设置状态时坚持使用字段名，或者将其更改为与数据库中使用的字段名相匹配（这可能更有意义，但可能并不总是可能）。这是有道理的，但是现在在从表单中推送信息时出现了一个错误，说明了一个未定义的错误：这将完整呈现页面！现在让数据库打印值，例如。
{vendorName}
您想显示
vendorName.vendorName
，但是当您将检索到的条目映射到状态时，没有
vendorName
字段，而是
vendorName
：
vendorName:items[项目].vendorName
。我建议您在设置状态时坚持使用字段名，或者将其更改为与数据库中使用的字段名相匹配（这会更有意义，但可能并不总是可能）。这是有意义的，但现在在从表单中推送信息时出现了一个错误，表明存在未定义的错误：
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>
    )
})
}