使用新用户输入重复通过 Firebase 显示的数据

Question

当用户(用户 1(登录我的网站时，他们会显示数据，当另一个用户(用户 2(提交新数据时，它应该在原始列表的底部添加一个新条目。但是，当其他用户(用户 2(提交新请求时，页面将显示原始列表，然后在初始列表之后重复相同的列表，但也带有新条目。

我想只将那个新条目添加到列表底部，而无需再次重复。我一直在尝试遵循这一点并尝试了解决方案，但它对我不起作用：Firebase child_added事件侦听器返回重复数据

例：

---

条目 1

条目 2

条目 3

通过用户 2 创建一个新条目：

---

条目 1

条目 2

条目 3

条目 1

条目 2

条目 3

条目 4

我想要它做什么：

---

条目 1

条目 2

条目 3

条目 4

代码片段：

let jobsArray = [];
let i = 0;
var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var datas = child.val();
var time = child.val().Scheduled_Time;
var name = child.val().Name;
var timeDriven = child.val().Time_Driven;
var date = child.val().Scheduled_Date;
var earnings = child.val().Estimated_Cost;
i++;
$('<div>', {id:'available' + i, class:"avail-accept-jobs-div margin-bottom-twentypx"}).appendTo('#availableJobs');
$('#available' + i).append('<div class="delete-job delete-avail-job"><p class="text-center font-weight-bold"><b>X</b></p></div>');
$('#available' + i).append('<p>Name: ' + name + '</p>');
$('#available' + i).append('<p>Date: ' + date + '</p>');
$('#available' + i).append('<p>Time: ' + time + '</p>');
$('#available' + i).append('<p>Drive Time: ' + timeDriven + '</p>');
$('#available' + i).append('<p>Potential Earnings: $' + earnings + '</p>');
$('#available' + i).append('<div class="accept-job-button text-center"><p>Accept</p></div>');
});
});

我的问题：

防止重复输入的最佳方法是什么？

Answer 1

您使用了错误的事件来满足自己的需求，来自 Listen for Value Events(强调我的(：

可以使用 value 事件读取给定路径上内容的静态快照，因为它们在事件发生时存在。此方法在附加侦听器时触发一次，每次数据(包括子项(更改时再次触发。事件回调将传递一个快照，其中包含该位置的所有数据，包括子数据。如果没有数据，则返回的快照为 null。

这意味着在每个新的招聘信息中，您都会获得之前发布的所有项目，包括新项目。

您需要的是侦听子事件，特别是child_added：

检索项目列表

或侦听对项目列表的添加。对于每个现有子项，将触发一次此事件，然后在每次将新子项添加到指定路径时再次触发此事件。将向侦听器传递包含新子级数据的快照。

我的直觉告诉我，只需用child_added替换value就可以为您解决问题，尽管现在您将逐项获取，无需再迭代列表; 像这样：

ref.on('child_added', function(snapshot) {
var datas = snapshot.val();
var time = snapshot.val().Scheduled_Time;
var name = snapshot.val().Name;
var timeDriven = snapshot.val().Time_Driven;
var date = snapshot.val().Scheduled_Date;
var earnings = snapshot.val().Estimated_Cost;
i++;
$('<div>', {id:'available' + i, class:"avail-accept-jobs-div margin-bottom-twentypx"}).appendTo('#availableJobs');
$('#available' + i).append('<div class="delete-job delete-avail-job"><p class="text-center font-weight-bold"><b>X</b></p></div>');
$('#available' + i).append('<p>Name: ' + name + '</p>');
$('#available' + i).append('<p>Date: ' + date + '</p>');
$('#available' + i).append('<p>Time: ' + time + '</p>');
$('#available' + i).append('<p>Drive Time: ' + timeDriven + '</p>');
$('#available' + i).append('<p>Potential Earnings: $' + earnings + '</p>');
$('#available' + i).append('<div class="accept-job-button text-center"><p>Accept</p></div>');
});