Question

我正在搜索这个主题，但似乎无法找到澄清我的答案。我正在尝试制作我的第一个反应应用程序。我已经开始使用create react app来理解基础知识，然后将我的应用程序移动到服务器端渲染。在我开发的过程中，我遇到了一个问题。如何在应用程序给出答案（服务器端）之前从我的API中获取一些数据，以便我可以在那里放一些我真正需要的东西？

Answer 1

您可以使用ajax请求从API中提取数据并将其设置为反应的state变量。这样状态变量将在渲染期间使用。您可以为此定义一个方法，您可以从componentDidMount()调用该方法将值设置为状态变量。

var CommentBox = React.createClass({
    getInitialState: function() {
        return {data : []};
    },
    loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
    handleCommentSubmit: function(comment){
        var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
         $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
                console.log(data);
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
    },
    componentDidMount: function() {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer(), this.props.pollInterval);
    },
    render: function() {
    return (
      <div className='commentBox'>
        <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

在上面的代码示例中，我专门编写了一个方法loadCommentsFromServer()来从API中提取数据。我从componentDidMount()调用它并将API的输出存储到状态变量中。而且，我在渲染过程中使用了状态变量。

注意：上面的代码示例可能无法自行运行。因为，它的依赖关系没有得到解决。

React Dependent from API

1 个答案: