编辑:包括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>
您可以在构造函数中设置空状态items
数组,以避免undefined
中的render()
error:
this.state = { items: [] }
这只是一个想法,因为忽略了构造函数的样子。
使用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"
);
}
);
});
}
尝试&&(和)运算符
{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>
)
})
}