Javascript 来自componentDidMount的错误请求

我使用Sortable（）来拖动和排序我拥有的项目列表。我希望将其加载到

componentDidMount

上，然后实际的排序功能就可以工作了。然而，当它到达ajax请求时，我得到一个400错误的请求。我认为这与它所处的环境有关，但我认为我已经解决了这个问题

当我省略componentDidMount并将函数附加到列表项时，请求工作正常。唯一阻止我这样做的是，列表项需要在加载可排序表之前单击

有什么建议吗？谢谢

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

var ToDoList=React.createClass({
getInitialState:函数（）{
返回{}
},
componentDidMount:function（）{
this.moveItem（）；
},  
moveItem:函数（id）{
var el=document.getElementById（'list'）；
var sortable=sortable.create（el{
onSort：函数（evt）{
var data={todo_id:id，旧索引：evt.oldIndex，新索引：evt.newIndex}
$.ajax({
url:“/todo/api/v1.0/move task”，
类型：“POST”，
数据：数据，
背景:这,，
成功：功能（数据、状态、xhr）{
var updated_todos=this.props.changeTodos（数据）；
}
});
}
});
},
render:function（）{
返回（

{this.props.todos.map（（todo，index）=>(

{todo.item}
△▽
x

))}

);
}
});

这是一个上下文问题，请尝试使用bind，如下所示：

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

---

我建议使用Babel转向ES6+。然后，您可以在上下文不变的情况下使用箭头函数（以及许多其他好处）。这里有一个教程可以帮助您入门：

您调用

this.moveItem（）我没有想到会是这样。如何将id传递给
componentDidMount
函数？为什么要尝试在componentDidMount（）中移动项？componentDidMount只调用一次。我可以理解你可能在那里预加载列表，但是移动其中一个项目似乎没有意义。你在那里的意图是什么？你想干什么？这将有助于找到正确的答案谢谢。但它仍然不起作用——我在某一点上通过了一个很长的this=that来传递上下文，但这也不起作用。但是谢谢你的es6教程。我真的需要跟上进度。