Uncaught TypeError: this.props.data.map不是一个函数

我知道，有数百个问题都有相同的标题，但没有什么能帮助我找到解决问题的方法。所以我通过官方的react js教程，用sinatra构建了一个小API来测试。

所以一切都很好。除了我在控制台看到的一个错误，当通过AJAX提交一个新的"笑话"(称为笑话而不是评论;))。

app.js:66 Uncaught TypeError: this.props.data.map is not a function

当我点击提交时会发生这种情况。我在提交表单时记录了状态，一切似乎都很好(数组与临时对象)。

表示正在添加新的Joke并将其写入数据库。它工作，但我不知道为什么我得到未捕获的类型错误在控制台中。

提前感谢!

var JokeBox = React.createClass({
  loadJokesFromServer: 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)
    });
  },
  handleJokeSubmit: function(joke) {
    var jokes = this.state.data;
    var tmpJoke = jQuery.extend({}, joke)
    tmpJoke.id  = new Date();
    tmpJoke.likes = 0;
    jokes.unshift(tmpJoke);
    this.setState({data: jokes}, function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: joke,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          this.setState({data: jokes});
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadJokesFromServer();
    setInterval(this.loadJokesFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="jokes">
        <h1>Jokes</h1>
        <JokeForm onJokeSubmit={this.handleJokeSubmit} />
        <JokeList data={this.state.data} />
      </div>
    );
  }
});
var JokeList = React.createClass({
  render: function() {
    var jokeNodes = this.props.data.map(function(joke) {
      return (
        <Joke content={joke.content} key={joke.id} likes={joke.likes} />
      );
    });
    return (
      <div className="jokeList">
        {jokeNodes}
      </div>
    );
  }
});
var JokeForm = React.createClass({
  getInitialState: function() {
    return {content: ''};
  },
  handleContentChange: function(e) {
    this.setState({content: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var content = this.state.content.trim();
    if (!content) {
      return;
    }
    this.props.onJokeSubmit({content: content});
    this.setState({content: ''});
  },
  render: function() {
    return (
      <form className="jokesForm" onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Your Joke!"
          value={this.state.content}
          onChange={this.handleContentChange}
        />
        <input type="submit" value="Send joke" />
      </form>
    );
  }
});
var Joke = React.createClass({
  render: function() {
    return (
      <div className="joke">
        <p className="jokeContent">{this.props.content}</p>
        <p className="jokeLikes">{this.props.likes}</p>
      </div>
    );
  }
});
ReactDOM.render(
  <JokeBox url="/api/jokes" pollInterval={2000} />,
  document.getElementById('app')
);

//编辑

所以我玩了从教程的示例教程repo。在设置状态之前，我在成功函数的handlessubmit中记录了数据。我发现:我的数据是实际新笑话的一个对象，在示例教程中，它是所有评论的数组。这怎么可能呢?