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

我一直在尝试将web应用程序中的一个页面转换为使用react，而不是使用jQuery和Vanilla JS，但由于我对react的不熟悉，我一直在思考如何处理它

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

这是通过打开引导模式来完成的，其中包含一个表单，该表单为编辑操作的相应行填充，以及一个确认删除的删除模式，页面上还有一个添加新行的链接，也是通过AJAX实现的，因此我尝试在react中复制此操作，但我似乎不知道如何进行此操作

现在我有了这个（我在这个例子中使用了一个通用组件名（

ModelName

），以避免与它的实际名称混淆）：

var ModelNames=React.createClass({
getInitialState:函数（）{
返回{model_names:this.props.model_names}；
},
render:function（）{
var行=[]；
this.props.model\u name.forEach（函数（model\u name）{
rows.push（）；
});
返回(
财产1
财产2
选择权
{rows}
);
}
});
var ModelName=React.createClass({
HandlerRemoveModelName:函数（）{
$.ajax（{
url:“/model\u name/ajax\u delete”，
数据：{model_name_id:this.props.model_name.id}，
键入：“POST”，
cache:false，
成功：功能（数据）{
this.setState（{model_names:data}）；//这是我遇到问题的部分
}.绑定（此），
错误：函数（）{
console.log（'error'）；
}.绑定（此）
});
},
render:function（）{
返回(
{this.props.model_name.property_1}
{this.props.model_name.property_2}
);
}
});
ReactDOM.render(
//这来自Rails
,
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);
  },
  // ...
});

var ModelNames=React.createClass({
HandlerRemoveModelName:函数（id）{
$.ajax（{
url:“/model\u name/ajax\u delete”，
数据：{model_name_id:id}，
键入：“POST”，
cache:false，
成功：功能（数据）{
this.setState（{model_names:data}）；
}.绑定（此），
错误：函数（）{
console.log（'error'）；
}.绑定（此）
});
},
render:function（）{
var行=[]；
this.props.model\u names.map（函数（model\u name）{
返回(
);
}，这个）；
// ...
}
});
var ModelName=React.createClass({
HandlerRemoveModelName:函数（）{
this.props.onRemove（this.props.model_name.id）；
},
// ...
});

---

此外，为了尝试包含所有相关内容，删除按钮仍然有

onClick={this.handleRemoveModelName}

对于

ModelName

返回

您必须确定数据的真实来源。在当前设置中，它似乎位于

ModelNames

中

与其让

ModelName

执行删除，不如让

ModelNames

执行删除，因为它拥有数据

只需将回调传递给

ModelName

，请求删除时调用该回调。在本例中，我们将向子组件添加一个新属性，

onRemove

，单击delete按钮时调用该属性：

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);
  },
  // ...
});

var ModelNames=React.createClass({
HandlerRemoveModelName:函数（id）{
//在这里打电话
},
render:function（）{
var rows=this.state.model\u names.map（函数（model\u name）{
返回(
);
}，这个）；
// ...
}
});
var ModelName=React.createClass({
HandlerRemoveModelName:函数（）{
this.props.onRemove（this.props.model_name.id）；
},
// ...
});

然后，父组件可以决定如何响应该请求，并进行适当的Ajax调用

这使得

ModuleName

成为一个“转储”组件。它与数据管理没有任何关系，只呈现它传递的数据

---

---

另一个问题是，您正在阅读

ModelNames

（

this.props.model\u names

）中的道具，而不是状态。状态和道具是不同的。您需要读取状态（

this.state.model_names

），以便组件在状态更改时更新。

在Felix Kling的回答之上，您需要在

ModalNames

和

ModalName

之间进行通信，以更新状态，因为状态由

ModalName

管理，并且事件在

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

---

另一种解决方案是在

ModalNames

中定义

handleRemoveModelName

，它接受id，调用ajax，并像最初一样设置状态。

wow，感谢Felix的回答-非常感谢。我现在就要试一试。实际上，我对组件名称感到困惑。我刚刚看到您已经在

ModelNames

中使用了state。让我更新我的答案。是的，是的，很抱歉给你带来困惑，

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