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

Question

我一直在尝试将我的 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 .

Answer 1

在 Felix Kling 的回答之上，您需要以某种方式在 ModalNames 和 ModalName 之间进行通信以更新状态，因为状态由 ModalNames 管理 并且事件在 ModalName 中被调用。

一种解决方案是将更新状态的函数传递给 ModalName:

模态名称:

var ModelNames = React.createClass({
  ...
  updateState: function(modal_names) {
    this.setState({modal_names})
  },
  render: function() {
    var rows = [];

    this.state.model_names.forEach(function(model_name) {
      rows.push(<ModelName model_name={model_name} key={model_name.id} updateState={this.updateState} />);
    });
    ...
  }
}

模态名称:

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.props.updateState(data);
      }.bind(this),
      error: function() {
        console.log('error');      
      }.bind(this)
    });
  },
  ...
}

替代解决方案是在 ModalNames 中定义 handleRemoveModelName，它接收 id，调用 ajax，并像您最初那样执行 setState。