Question

我有一个从json发布/获取数据的应用程序。但是，当我添加评论时，我添加的最新评论并未自动附加，但如果我刷新或恢复这些值，它将显示。

这是处理我的评论的代码

handleCommentChange(e) {
    this.setState({text: e.target.value});
  }

  handleComment(e) {
    e.preventDefault();
    var callback = console.log('lol');
    Request.post('http://localhost:3000/api/comments')
           .send({
            idComment: this.state.id,
            author: this.state.name,
            text: this.state.text
          })
           .end(callback)
           this.ReturnComment();

    var newItem = {
      id: Date.now(),
      author: this.state.name,
      text: this.state.text
    };
    // this.setState((prevState) => ({
    //   items: prevState.items.concat(newItem),
    //   text: ""
    // }));
    this.setState({
      text: ""
    });
  }



  ReturnComment(){
    var urlComment = "http://localhost:3000/api/comments";
    Request.get(urlComment)
            .then((i) => {this.setState({commentBody: i})});
  }

这是使用这些功能的组件

export default React.createClass ({

  render() {
    return (

      <div>
        <h1>Comments <small>on {this.props.pokeName}</small></h1>
        <div className="commentsSection">
          <div>
            <div>
                {this.props.commentBody.body
                  .filter((objComment) => {return objComment.author === this.props.pokeName})
                  .map((i) => {return (
                                <div className="itemComment">
                                  <p className="no-margin">"{i.text}"</p>
                                  <p className="right">-{i.id}</p>
                                </div>)
                              })
                }
                 {this.props.items.map(item => (
                    <div className="itemComment">
                      <p className="no-margin" key={item.id}>"{item.text}"</p>
                      <p className="right">-{item.id}</p>
                    </div>
                ))}
            </div>
                 
          </div>
        </div>
        <form onSubmit={this.props.handleComment}>
          <textarea className="textarea" onChange={this.props.onChange} value={this.props.text} rows="4"/>
          <button className="btn btn-default">Comment</button>
        </form>
      </div>
    );
  }
}

  )

提前谢谢。

Answer 1

这是因为，在handleComment内部，您在不等待POST API完成的情况下调用this.ReturnComment()。

因此GET API获取相同的旧数据。但正如您所说，如果您刷新页面，您将从API获取新数据。

所以你可以这样做：

  handleComment(e) {
    e.preventDefault();
    var callback = console.log('lol');
    Request.post('http://localhost:3000/api/comments')
      .send({
        idComment: this.state.id,
        author: this.state.name,
        text: this.state.text
      })
      .then(() => this.ReturnComment())
      .end(callback)

    // ... rest of the things

使用ReactJS onSubmit时自动更新

1 个答案: