React AJAX net:::ERR_EMPTY_RESPONSE 在五个请求后

Question

我有 3 个 ajax 函数：

onRemoveFromList - 将数据库属性显示更改为 false， 然后调用 FetchTodosFromDatabase

onAddToList - 将数据库属性显示更改为 true， 然后调用 FetchTodosFromDatabase

onFetchTodosFromDatabase - 从数据库中获取数据并更改 对此数据的状态

onRemoveFromList(id) {
return axios.post('/todo/removeFromList/' + id)
.then(this.onFetchTodosFromDatabase())
.catch(function (error) {
throw error;
});
}
onAddToList(id) {
return axios.put('/todo/addtoList/' + id)
.then(this.onFetchTodosFromDatabase())
.catch(function (error) {
throw error;
});
}
onFetchTodosFromDatabase() {
return axios.get('/todo')
.then(res => {
let data = res.data;
this.setState({ todos: data });
})
.catch(function (error) {
throw error;
});
}

路由器：

router.get('/', function(req, res, next) {
Todo.find(function(err, doc) {
if(err) throw err;
res.json(doc);
});
});


// find todo by id and change display property to true
router.put('/addToList/:id',  function(req, res, next) {
var id = req.params.id;
Todo.findByIdAndUpdate(id, { $set: { display: true }}, {new: false}, 
function(err, doc) {
if(err) {
throw err;
}
doc.save();
});
});

router.post('/removeFromList/:id', function(req, res, next) {
var id = req.params.id;
Todo.findByIdAndUpdate(id, { $set: { display: false }}, {new: true}, 
function(err, doc) {
if(err) {
throw err;
}
doc.save();
});
});

呈现：

enter code here
render() {
const todos = this.props.todos.map((todo, i) => {
let property = {
title: todo.title,
duration: todo.duration,
startTimeHours: todo.startTimeHours,
startTimeMinutes: todo.startTimeMinutes,
finishTimeHours: todo.finishTimeHours,
finishTimeMinutes: todo.finishTimeMinutes,
id: todo._id,
}
if(todo.display) {
return (
<Todo removeFromList={this.props.removeFromList} key={ i} property={property}/>
);
}
});
return(
<div className="row">
<ul>
{todos}
</ul>
</div>
)

问题：

我有两个主要组件：一个显示任务(所有待办事项)，另一个显示待办事项列表(显示==true的待办事项)，当我单击按钮时，addToList函数触发并显示变为true，它应该出现在TodoList组件中，并且工作正常，所有内容都呈现，直到我第五次单击按钮(不同的按钮)

大约 2 分钟后我收到错误，如下所示

放 http://localhost/todo/addtoList/591afa29891b6f1c8fa58124 网：：ERR_EMPTY_RESPONSE

调试后，我意识到所有 ajax 调用都可以工作，但在 POST 请求 ajax 的五次调用后，不会触发 fetchFromDatabase 中的 setState (addToList 和 removeFromList)。

问题：

1. 我应该怎么做才能防止此错误？
2. 为什么在我提出五个请求之前它可以正常工作？

Answer 1

看起来你实际上是在打电话.then(this.onFetchTodosFromDatabase())

这将立即触发 axios 请求，而不是将其添加为 promise 回调，因此您正在发布，但随后不会在其完成时运行 get 或 setState

删除括号.then(this.onFetchTodosFromDatabase)应该会有所帮助