Javascript React AJAX net:：：五个请求后的ERR_EMPTY_响应

我有3个ajax函数：

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

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

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>
)

在此处输入代码
render（）{
const todos=this.props.todos.map（（todo，i）=>{
let属性={
标题：todo.title，
持续时间：todo.duration，
startTimeHours:todo.startTimeHours，
startTimeMinutes:todo.startTimeMinutes，
finishTimeHours:todo.finishTimeHours，
finishTimeMinutes:todo.finishTimeMinutes，
id:todo.\U id，
}
如果（todo.display）{
返回(
);
}
});
返回(

{todos}

)

问题:

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

大概2分钟后，我会出错，就像这样

PUT net:：ERR\u EMPTY\u响应

调试之后，我意识到所有ajax调用都可以工作，但在五次请求后ajax调用之后，fetchFromDatabase中的setState没有被激发 （addToList和removeFromList）

问题:

我应该怎么做来防止这个错误

为什么在我提出五个请求之前它工作正常

---

看起来您实际上在调用

。然后（this.onFetchTodosFromDatabase（））

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

删除括号

。然后（this.onFetchTodosFromDatabase）

会有所帮助