当状态发生变化时，元素将被复制。
当状态发生变化时，元素将被复制。
提问于 2018-06-12 09:40:01
我正在制作一个带有realtime和Firebase实时数据库的web应用程序。功能很简单，我从Firebase获得多个对象，然后遍历该对象并呈现一个值列表。
当我从Firebase控制台更新数据库时，就会出现问题。当我这样做时，状态会改变，列表重选器也会改变，但是它会一次又一次地重复列表。我不知道我在做什么wong或者我的方法是不正确的，但是我想呈现一个包含来自对象的信息的列表，并且当数据库被更新时，列表更新(更改数据或删除条目)。
这里有一些片段和截图。
我获取对象并将它们保存到一个对象中，并为以后的迭代获取salt/ids。
const rootRef = firebase
.database()
.ref()
.child('orders');
rootRef.on('value', snap => {
this.setState({ allOrders: snap.val() }); //Save the objects in a state objectTaker
//Iterate through the object and save the salt/id
const p = snap.val();
for (var key in p) {
if (p.hasOwnProperty(key)) {
this.setState(prevState => ({
saltsOrders: [...prevState.saltsOrders, key]
}));
}
}
});在这里，我迭代I数组并为数据调用对象：
renderOrders = () => {
return (
<ul className="collection" id="listOrders">
{this.state.saltsOrders.map(num => {
return (
<li
className="collection-item"
onClick={() =>
this.setState({
objectOrder: this.state.allOrders[num],
showOrder: true
})
}
>
{this.state.allOrders[num].signedOrder.salt}
</li>
);
})}
</ul>
);
};在呈现()中，我对renderOrders有一个简单的调用：
{this.renderOrders()}
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-12 10:20:17
您可以使用Object.keys直接迭代对象，例如：
Object.keys(allOrders).map(key => <div>Salt key: {key}, value: {allOrders[key]}</div>)这样，您就不必做键循环和担心重复的问题，因为在那里的价差。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50813970
复制相关文章
相似问题
腾讯云开发者
