依赖于 API

Question

我搜索了很多关于这个主题的内容，但似乎找不到可以让我明白的答案。我正在尝试制作我的第一个 React 应用程序。我已经开始创建 React 应用程序以了解基础知识，然后将我的应用程序移动到服务器端渲染。在开发过程中，我遇到了一个问题。在应用程序给出答案（服务器端）之前，我如何从我的 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 的输出存储到状态变量中。而且，我在渲染期间使用了状态变量。

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

依赖于 API

React Dependent from API

reactjs

wordpress-rest-api