五個請求后反應AJAX net ::: ERR_EMPTY_RESPONSE

Question

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

問題：

我有兩個主要組成部分：一個顯示任務（所有待辦事項），另一個顯示待辦事項列表（todos with display == true），當我單擊按鈕時，addToList函數被觸發並顯示為true，它應該出現在TodoList組件中，一切正常，直到我第五次單擊按鈕（不同的按鈕）

大約2分鍾后，我得到了錯誤，像這樣

放置http：// localhost / todo / addtoList / 591afa29891b6f1c8fa58124 net :: ERR_EMPTY_RESPONSE

調試后，我意識到在POST請求ajax的五個調用（addToList和removeFromList）之后，所有ajax調用都可以工作，但是fetchFromDatabase中的setState不會觸發。

問題：

1. 我應該怎么做才能避免這個錯誤？
2. 為什么在我發出五個請求之前可以正常工作？

Answer 1

看起來您實際上在調用.then(this.onFetchTodosFromDatabase())

這將立即觸發axios請求，而不是將其添加為promise回調，因此您正在發布，但在完成時將不運行get或setState

刪除括號.then(this.onFetchTodosFromDatabase)應該會有所幫助