React - 如何在 AJAX 请求后更新状态

我一直在修补将 Web 应用程序中的一个页面转换为使用 react 而不是 jQuery 和 Vanilla JS，但由于我对 react 的不熟悉，我陷入了如何处理它的困境。

目前，在页面上，我有一个html表，其中包含与数据库表相关的行，另一列包含用于编辑和删除行的链接。

这是通过打开引导模式来完成的，其中包含一个表单，该表单是为编辑操作的相应行填充的，还有一个删除模式以确认删除，页面上还有一个链接可以添加新行，也是通过 AJAX，所以我试图做的是在 react 中复制它，但我似乎不明白如何去做。

目前我有这个（我在这个例子中使用了一个通用组件名称（ModelName），以避免与它的实际名称混淆。

var ModelNames = React.createClass({
  getInitialState: function() {
    return {model_names: this.props.model_names};
  },
  render: function() {
    var rows = [];
    this.props.model_names.forEach(function(model_name) {
      rows.push(<ModelName model_name={model_name} key={model_name.id} />);
    });
    return (
      <div className="row">
        <div className="col-md-12">
          <table className="table table-striped table-bordered table-hover">
            <thead>
              <tr role="row" className="heading">
                <th>Property 1</th>
                <th>Property 2</th>
                <th className="text-center">Options</th>
              </tr>
            </thead>
            <tbody>{rows}</tbody>
          </table>
        </div>
      </div>
    );
  }
});
var ModelName = React.createClass({
  handleRemoveModelName: function() {
    $.ajax({           
      url: '/model_name/ajax_delete', 
      data: { model_name_id: this.props.model_name.id },
      type: 'POST',
      cache: false,           
      success: function(data) {
        this.setState({ model_names: data }); // this is the part I am having trouble with
      }.bind(this),
      error: function() {
        console.log('error');      
      }.bind(this)
    });
  },
  render: function() {
    return (
      <tr id={"model_name_" + this.props.model_name.id}>
        <td>{this.props.model_name.property_1}</td>
        <td>{this.props.model_name.property_2}</td>
        <td className="text-center">
          <a href="javascript:;" className="btn btn-xs" onClick={this.handleEditModelName}><i className="fa fa-pencil"></i></a> <a href="javascript:;" className="btn btn-xs" onClick={this.handleRemoveModelName}><i className="fa fa-remove"></i></a>
        </td>
      </tr>
    );
  }
});
ReactDOM.render(
  // this comes from Rails
  <ModelName model_names={<%= @model_names.to_json %>} />,
  document.getElementById('react')
);

通过 ajax 删除工作正常，服务器端响应数据库表中的所有行（删除发生后），因此 json 响应的格式与页面加载时提供的初始数据完全相同，我只是想弄清楚如何更新状态，以便 react 知道删除我刚刚删除的记录。

同样，我想扩展它以复制我的编辑和创建 CRUD 功能，但在阅读了许多博客文章后，我正在努力找到我需要的信息。

更新

var ModelNames = React.createClass({
  handleRemoveModelName: function(id) {
    $.ajax({           
      url: '/model_name/ajax_delete', 
      data: { model_name_id: id },
      type: 'POST',
      cache: false,           
      success: function(data) {
        this.setState({ model_names: data });
      }.bind(this),
      error: function() {
        console.log('error'); 
      }.bind(this)
    });
  },
  render: function() {
    var rows = [];
    this.props.model_names.map(function(model_name) {
      return (
        <ModelName 
          model_name={model_name}
          key={model_name.id}
          onRemove={this.handleRemoveModelName}
        />
      );
    }, this);
    // ...
   }
});
var ModelName = React.createClass({
  handleRemoveModelName: function() {
    this.props.onRemove(this.props.model_name.id);
  },
  // ...
});

此外，只是为了尝试包含所有相关内容，删除按钮仍然具有onClick={this.handleRemoveModelName} 用于ModelName return 。