在react组件中使用ajax获取实时更新的数据

Get live updated data with ajax in a react component

本文关键字：获取 实时更新 数据 ajax react 组件      更新时间：2023-11-04

故事：

用户单击"添加"，它会将数据库中的值设置为true。单击"删除"，将数据库中的同一列更新为false：

def add
  u = User.find(1)
  u.foo = true
  u.save
  u.reload
  head :ok
end
def remove
  u = User.find(1)
  u.foo = false
  u.save
  u.reload
  head :ok
end

React按钮组件：

...
_add(){
  $.ajax({
    url: ''url-to-the-controller-action-(add),
    type: 'POST',
    success: function (data) {
        console.log("DB is set to: " this.props.uid)
    },
    error: function (data) {
        console.log("not added")
    }
  });
},
_remove(){
  $.ajax({
    url: ''url-to-the-controller-action-(remove),
    type: 'POST',
    success: function (data) {
        console.log("DB is set to: " this.props.uid) 
    },
    error: function (data) {
        console.log("not removed")
    }
  });
},
render(){
  return(
    <div>
      <button onClick={this._add}>add</button>
      <button onClick={this._remove}>remove</button>
    </div>
  )
}
...

我的按钮接收来自另一个组件的道具：

Foo组件

getInitialState: function() {
  return{
    uid: this.props.data,
  }
}

Foo的渲染：

<Button uid={this.state.uid} />

我相信我可以在不需要通量/冗余的情况下实现这一点，因为这对这个微小的组件来说是一个过度杀伤。我已经研究过了，但不确定如何使用它。

该应用程序可以工作，但我必须刷新页面才能看到更改。

或者，Rails5是我最好的行动电缆选择？

成功后，您需要通知Foo组件uid是否已更改。

在Foo组件中：

onChange: (uid) ->
   this.setState({uid: uid})
render: ->
  <Button uid={this.state.uid} onChange={this.onChange}/>

在按钮组件中：

_add(){
  $.ajax({
    url: ''url-to-the-controller-action-(add),
    type: 'POST',
    success: function (data) {
     this.props.onChange(data["uid"])
     console.log("DB is set to:", data["uid"])
    },
    error: function (data) {
       console.log("not added")
    }
  });
},

在您的行动中：

def add
  ...
  render json: { uid: u.foo }
end

关于为什么你需要刷新这里：

当您进行ajax调用时，数据库中的数据会更新。但在成功回调时，您需要使用新数据更新视图。当您记录this.props.uid时，您将旧数据记录在内存中，当您点击刷新时，数据将被数据库中的新数据替换。

例如，在jQuery中，您需要用成功回调中传递的新数据替换DOM中的元素。在ReactJS中，您需要更新状态以重新渲染组件。

在这里，您的组件Button是Foo的子级，并像道具一样接收uid。因此，您需要通知您的父组件uid是否已更改为更新状态，并重新呈现其自身及其子组件。

相关文章：