在五个请求后反应 AJAX net:::ERR_EMPTY_RESPONSE答案

【问题标题】：React AJAX net:::ERR_EMPTY_RESPONSE after five requests在五个请求后反应 AJAX net:::ERR_EMPTY_RESPONSE
【发布时间】：2017-05-18 08:48:29
【问题描述】：

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

问题：

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

大概 2 分钟后我得到错误，像这样

PUT http://localhost/todo/addtoList/591afa29891b6f1c8fa58124 net::ERR_EMPTY_RESPONSE

调试后，我意识到所有 ajax 调用都有效，但 fetchFromDatabase 中的 setState 在五次 POST 请求 ajax 调用后没有被触发（addToList 和 removeFromList）。

问题：

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

【问题讨论】：

标签： javascript ajax reactjs

【解决方案1】：

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

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

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

【讨论】：