Javascript ReactJS-如何构造组件以使用数据刷新块？

我开始玩React，并尝试构建一个简单的应用程序，在其中我有一个帖子列表，添加一个新帖子后，这个帖子将被添加到列表中。以下是我目前掌握的情况：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Moment from 'react-moment';
import LoadModal from './LoadModal';
import NewPost from './NewPost';

class Posts extends React.Component {
    constructor(props) {
        super(props);

      this.state = {
        posts: [],
            loading: true
       };
    }

    componentDidMount() {
        axios.get('/posts')
        .then(response => {
            this.setState({ posts: response.data, loading: false });
          });
    }

    toggleItem(index) {
        console.log('clicked index: '+index);
        this.setState({
            activeKey: this.state.activeKey === index ? null : index
        })
    }

    moreLess(index) {
        if (this.state.activeKey === index) {
            return (
                <span>
                    <i className='fas fa-angle-up'></i> Less
                </span>
            );
        } else {
            return (
                <span>
                    <i className='fas fa-angle-down'></i> More
                </span>
            );                      
        }
    }


  render () {
        let content;

        if (this.state.loading) {
            content = 'Loading...';
        } else {
            content = this.state.posts.map(post => {
            return(
                <li key={post.id}>
                <div>   
                            <span>{post.id}</span>
                            <i className="fas fa-clock"></i>
                            <Moment format="MMM DD @ HH:MM">
                                <span className="badge badge-pill badge-primary">{post.created_at}</span>
                            </Moment>
                            <button className="btn btn-primary btn-xs" style={{'marginLeft': '10px'}} onClick={this.toggleItem.bind(this, post.id)}>
                                {this.moreLess(post.id)}
                            </button>
                        </div>
                        <div className={this.state.activeKey === post.id ? "msg show" : "msg hide"}>{post.message}</div>
                    </li>
                )
            });
        }
    return (
            <div>
        <h1>Posts!</h1>
                <div className="row">
                    <NewPost />
                </div>
                <div className="row">
                    <div className="col-md-6">
                        <ul>
                            {content}
                        </ul>
                    </div>
                    <div className="col-md-6">
                        <div>
                    Modal
                        </div>
                    </div>
                </div>
      </div>
    );
  }
}

export default Posts

我一直在努力——我在数据库中添加了一篇新文章，但是——如何将这篇新文章添加到现有文章列表中

编辑：同时添加我的index.html.erb（它只在那里渲染组件）

---

首先，我觉得在创建后返回所有帖子是一种过度工程。让我们做一些类似的事情：

@post = Post.new(params.require(:post).permit(:message))
if post.save
  render json: @post
else
  render json: @post.errors, status: :unprocessable_entity 
end

在前端，尝试以下操作

handleSubmit(event) {
  event.preventDefault();           
    const form_data = {
  namee: this.state.namee,
        description: this.state.description
};

    axios.post('/posts/testtt', { form_data })
          .then(res => {
            console.log(res);
            console.log(res.data); 
            this.props.onAddPost(res.data)

          })
}

在NewPost中，考虑到给它一个prop

onAddPost

像

this.addPost（post，e）}/>

这样定义的

addPost

：

addPost(post){
    const oldPosts = this.state.posts;
    this.setState({posts: oldPosts.push(post)})
}

---

您可以在中创建此代码段吗？这将更容易提供帮助。后端是否只返回您创建的帖子，还是将所有帖子与新帖子一起返回？谢谢。当我测试它时，我得到了错误

Uncaught（in promise）ReferenceError:post未在这一行定义：
this.addPost（post，e）}/>
。我错过了什么？非常感谢。为什么？编辑问题，以便我可以看到所有内容。同时，你在终点站前有帖子吗？
@post = Post.new(params.require(:post).permit(:message))
if post.save
  render json: @post
else
  render json: @post.errors, status: :unprocessable_entity 
end

handleSubmit(event) {
  event.preventDefault();           
    const form_data = {
  namee: this.state.namee,
        description: this.state.description
};

    axios.post('/posts/testtt', { form_data })
          .then(res => {
            console.log(res);
            console.log(res.data); 
            this.props.onAddPost(res.data)

          })
}

addPost(post){
    const oldPosts = this.state.posts;
    this.setState({posts: oldPosts.push(post)})
}