componentDidMountからのリクエストが正しくありません

Question

私は持っているアイテムのリストをドラッグ＆ソートできるようにSortable（https://github.com/RubaXa/Sortable）を使用しています。これをcomponentDidMountにロードして、実際の並べ替え機能が動作するようにします。しかし、それがajaxリクエストに達すると、私は400の悪い要求を受け取ります。私はそれはそれがある文脈とは関係があると思うが、私はそれを整理したと思った。

私は単にcomponentDidMountを省略し、関数をリスト項目に追加するだけで、要求は正常に機能します。私がこれをやめるのを止める唯一の事は、Sortableがロードされる前にリストアイテムがクリックを必要とすることです。

提案がありますか？ありがとう！

var ToDoList = React.createClass({ 
    getInitialState: function() { 
    return {} 
    }, 
    componentDidMount: function(){ 
    this.moveItem(); 
    }, 
    moveItem: function(id){ 
    var el = document.getElementById('list'); 
    var sortable = Sortable.create(el, { 
     onSort: function(evt) { 
     var data = { todo_id: id, old_index: evt.oldIndex , new_index: evt.newIndex } 

     $.ajax({ 
      url: "/todo/api/v1.0/move-task", 
      type: "POST", 
      data: data, 
      context: this, 
      success: function(data, status, xhr) { 
      var updated_todos = this.props.changeTodos(data); 
      } 
     }); 
     } 
    }); 
    }, 
    render: function(){ 

    return (<ul id="list"> 
     {this.props.todos.map((todo, index) => (
     <li onMouseDown={this.moveItem.bind(this, todo._id.$oid)} key={todo._id.$oid} data-id={todo._id.$oid} className={"list-item"}> 
      <input checked={todo.complete} onChange={this.completeItem.bind(this, todo._id.$oid)} type="checkbox" /> 
      <div className={"item " + todo.complete }>{todo.item}</div> 
      <div className="move">△▽</div> 
      <div className="delete" onClick={this.deleteItem.bind(this, todo._id.$oid)}>x</div> 
     </li> 
    ))} 
     </ul> 
    ); 
    } 
}); 

Answer 1

それはそうのように、バインドを使用してみてください、コンテキストの問題です：

moveItem: function(id){ 
    var el = document.getElementById('list'); 
    var sortable = Sortable.create(el, { 
     onSort: function(evt) { 
     var data = { todo_id: id, old_index: evt.oldIndex , new_index: evt.newIndex } 

     $.ajax({ 
      url: "/todo/api/v1.0/move-task", 
      type: "POST", 
      data: data, 
      context: this, 
      success: function(data, status, xhr) { 
      var updated_todos = this.props.changeTodos(data); 
      }.bind(this) 
     }); 
     }.bind(this) 
    }); 
    } 

私はバベルを使用してES6 +に向かって移動をお勧めします。次に、コンテキストが変更されない矢印関数を使用できます（他の多くの利点に加えて）。 https://blog.risingstack.com/the-react-way-getting-started-tutorial/