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

我一直在尝试将Web应用程序中的一页转换为使用react而不是jQuery和Vanilla JS,但是由于我对react并不熟悉,因此我一直在坚持如何处理它.

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

这是通过打开引导程序模版来完成的,该程序包包含一个表格,该表格已填充用于编辑操作的适当行,而删除模版用于确认删除,页面上还有一个链接,也可以通过AJAX 添加新行,所以我想做的是在反应中复制此内容,但我似乎不明白该如何处理.

目前,我已经有了这个(在本示例中,我使用通用组件名称(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.

解决方法:

您必须决定数据的真实来源应该在哪里.在您当前的设置中,它似乎在ModelNames中.

不要让ModelName执行删除,而是让ModelNames进行删除,因为它拥有数据.

只需将回调传递给ModelName即可,该回调在请求删除时被调用.在此示例中,我们向子组件添加了一个新属性onRemove,该属性在单击删除按钮时被调用：

var ModelNames = React.createClass({
  handleRemoveModelName: function(id) {
    // make Ajax call here
  },

  render: function() {
    var rows = this.state.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);
  },
  // ...
});

然后,父组件可以决定它想如何对此做出响应并进行适当的Ajax调用.

这使ModuleName成为“转储”组件.它与数据管理没有任何关系,仅呈现它传递的数据.

另一个问题是您正在读取ModelNames(this.props.model_names)中的道具,而不是状态.状态和道具不同.您需要从状态(this.state.model_names)中读取信息,以便组件在状态更改时进行更新.

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

相关推荐