Question

我想每隔5秒钟从服务器获取一个随机数，我使用jquery / ajax

完成了这个

我对使用react做的步骤感到有点困惑，这是我原来的脚本：

  <script type="text/javascript">
  fetchData();
  $(document).ready(function() {
      setInterval(fetchData, 5000);
  });
  function fetchData(){
      $.ajax({
          url: "/realtime/show",
          type: "GET",
          contentType: 'application/json',
          success: function(result) {
              $("#result").html(result.data);
          }
      });

  }

Answer 1

在组件的componentDidMount调用中，您可以设置间隔，向其传递一个将进行AJAX调用的函数。然后在AJAX调用的回调中，您可以以某种方式设置组件状态（小心this）。然后你的渲染方法只需根据需要使用状态。确保在组件卸载时清除间隔，以便它不会继续运行。以下是一个简单的例子：

var AjaxCall = React.createClass({
    intervalId: null,
    request: null,
    getInitialState: function() {
        return {
            data: null
        };
    },

    componentDidMount: function() {
        this.intervalId = setInterval(this.fetchData, 5000);
    },

    componentWillUnmount: function() {
       if (this.intervalId) {
           clearInterval(this.intervalId)
           this.intervalId = null;
       }

       if (this.request) {
           this.request.abort();
           this.request = null;
       }
    },

    fetchData: function() {
        this.request = $.ajax({
            url: "/realtime/show",
            type: "GET",
            contentType: 'application/json',
            success: function(result) {
                var d = // process results
                this.setState({ data: d });
            }.bind(this)
        });
    },

    render: function() {
        // use this.state.data here however you need ot
        if (!this.state.data) {
            return <div>No data</div>
        }

        return <div>{this.state.data}</div>;
    }
});

ReactDOM.render(
  <AjaxCall />,
  document.getElementById('container')
);

您可以看到有关从组件进行AJAX调用的更多信息（例如初始数据加载）here

使用react从服务器获取数据并更新组件的状态

1 个答案: