开机自检数据后自动刷新并获取

Question

>我尝试使用fetch方法制作简单的待办事项列表;所有请求都可以正常工作才能看到结果，如果我尝试添加函数updateData以承诺在添加或删除任务中，则必须刷新网站，整个列表加倍。我可以要求一些有关如何使其与自动刷新一起使用的提示吗？ 我正在使用 JSON 服务器来存储数据。

function updateData() {
var ul = document.querySelector('.listOfTasks');
fetch('http://localhost:3000/tasks')
.then((res) => res.json())
.then((data) => {
let tasks = '';
data.forEach(function (task) {
tasks +=
`<li class="taskElement" id=${task.id}><input type="checkbox" class="checkbox">
<span class="task"> ${task.name}</span>
<img class="deleteBtn" id=${task.id} src="../assets/trash.png"> </img>
</li>`
})
ul.insertAdjacentHTML('afterBegin', tasks)
})
}

function addTask(e) {
e.preventDefault();
var taskName = document.querySelector('.taskName').value;
var ul = document.querySelector('.listOfTasks');
if (taskName === "") {
alert("Please write something")
} else {
fetch('http://localhost:3000/tasks', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json'
},
body: JSON.stringify({name: taskName})
})
.then((res) => res.json())
}
}
function deleteTask(e) {
e.preventDefault();
if (e.target.className === 'deleteBtn') {
fetch('http://localhost:3000/tasks/' + e.target.id, {
method: 'DELETE',
})
.then((res) => res.json())
.then((data) => console.log(data))
}
}

Answer 1

如果要运行updateData()来刷新列表，则需要替换<ul>的内容，而不是添加到其中。

因此只需更改

ul.insertAdjacentHTML('afterBegin', tasks);

自

ul.innerHTML = tasks;

有关文档，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML。