Question

我知道，有数百个问题具有相同的标题，但没有任何帮助我解决我的问题。所以我通过官方的反应js教程，并用sinatra构建一个小API来测试。

所以一切都很好。除了我在控制台中看到的一个错误，当提交一个新的＆＃34;笑话＆＃34; （称他们为笑话而不是评论;））通过AJAX。

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

当我点击提交时会发生这种情况。我在提交表单时记录了状态，一切似乎都没问题（包含临时对象的数组）。

所以新的Joke被添加并写入数据库。它有效，但我不知道为什么我在控制台中获得了未捕获的TypeError。

提前感谢！

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。在设置状态之前，我在成功函数中的handleSubmit中记录数据。我想通了：我的数据是实际新Joke的ja对象，在示例教程中它是所有注释的数组。怎么会这样？我无法找到我的错误......

Answer 1

<强>尝试

handleJokeSubmit: function(joke) {

    let {data}= this.state;

    $.post(this.props.url, joke, res=>{
       this.setState({data:[res,...data]});
    })
   .fail( err=>alert('Error: ' + err.responseText));
}

///编辑 es5

handleJokeSubmit: function(joke) {

    var data = this.state.data;

    $.post(this.props.url, joke, function(res){
       this.setState({data:[res].concat(data)});
    }.bind(this))
   .fail( function(err){alert('Error: ' + err.responseText)});
}

React Tutorial和Sinatra API：Uncaught TypeError：this.props.data.map不是函数

1 个答案: