2017-05-18 7 views
0

後AJAXネット::: ERR_EMPTY_RESPONSEに反応します その後、は、私は3つのAjaxの機能を持っている5つの要求

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

問題:

私は2つの主要コンポーネントがあります:ドスと(一つの表示タスク(すべてのドス)、および他のディスプレイ藤堂リストdisplay == true)、ボタンをクリックするとaddToList関数が呼び出され、表示がtrueになり、TodoList Componentに表示され、ボタンfiをクリックするまでレンダリングされますFTH時間(異なるボタン)

多分2分後、私は、デバッグ後にこの

PUT http://localhost/todo/addtoList/591afa29891b6f1c8fa58124ネット:: ERR_EMPTY_RESPONSE

のように私はすべてのAjaxがで動作しますが、SETSTATEを呼び出すことを認識し、エラーが発生しますPOST要求ajax (addToListとremoveFromList)を5回呼び出した後、fetchFromDatabaseは起動されません。

質問:

  1. 私はこのエラーを防ぐにはどうすればよいですか?
  2. なぜ5つのリクエストを行う前に問題なく動作しますか?

答えて

0

あなたが実際にこれは、axios要求すぐにではなく、約束のコールバックとしてそれを追加することがトリガされます、あなたが投稿しているので、しかし、その完成

でgetまたはSETSTATEを実行しません .then(this.onFetchTodosFromDatabase())

を呼んでいるように見えます

括弧を削除すると.then(this.onFetchTodosFromDatabase)は助けてください

関連する問題