React：子组件在提交表单时不会重新呈现

Question

我是React的新手，我会提供很多帮助。我正在使用create-react-app，react-router-dom和express server。当我尝试向博客帖子（名为Details的子组件）提交评论时，它会存储在数据库中，但是组件似乎没有更新，我也看不到新的评论。结果，我可以看到只有在我刷新页面后才能发表新评论，但不在表单提交上。我想我没有正确设置componentDidUpdate，但我不知道怎么做，所以我可以立即看到评论。

这是我的App.js：

class App extends Component 
  constructor(props) 
    super(props)
    this.state = 
      userId: null,
      username: null,
      isAdmin: false,
      isAuthed: false,
      jwtoken: null,
      posts: [],
      filtered: [],
    
    this.handleSubmit = this.handleSubmit.bind(this)
  

  static authService = new AuthService();
  static postService = new PostService();
  static commentService = new CommentService();

  componentDidMount() 

    const isAdmin = localStorage.getItem('isAdmin') === "true"
    const isAuthed = !!localStorage.getItem('username');

    if (isAuthed) 
      this.setState(
        userId: localStorage.getItem('userId'),
        username: localStorage.getItem('username'),
        isAdmin,
        isAuthed,
      )
    
    this.getPosts()

  

  componentDidUpdate(prevProps, prevState, posts) 
    if (prevState === this.state) 
      this.getPosts()
    
  


  handleChange(e, data) 
    this.setState(
      [e.target.name]: e.target.value
    )
       

  handleCommentSubmit(e, data) 

    e.preventDefault();
    e.target.reset();
    App.commentService.createComment(data)
      .then(body => 
        this.getposts()
        if (!body.errors) 
          toast.success(body.message);
        
        else 
          toast.error(body.message);
        
      
      )
      .catch(error => console.error(error));

  

  getPosts() 
    App.postService.getPost()
      .then(data => 
        this.setState(
          posts: data.posts.length? data.posts : []
        );
      
      )
      .catch(e => this.setState( e ))
  

  render() 

    return (
      <Fragment>
        <Header username=this.state.username isAdmin=this.state.isAdmin isAuthed=this.state.isAuthed logout=this.logout.bind(this) />

        <Switch>

          <Route exact path="/" render=(props) => (
            <Home
              posts=this.state.posts
              handleSearchSubmit=this.handleSearchSubmit.bind(this)
              handleChange=this.handleSearchChange.bind(this)
              ...props />
          ) />

          <Route path="/posts/:id" render=(props) =>
            <Details handleSubmit=this.handleCommentSubmit.bind(this)
              isAdmin=this.state.isAdmin
              isAuthed=this.state.isAuthed
              posts=this.state.posts
              handleChange=this.handleChange
              ...props /> />



        </Switch>

        <Footer posts=this.state.posts formatDate=this.formatDate />
      </Fragment>
    );
  


export default withRouter(App);

这是我的Details.js：

class Details extends Component 
  constructor(props) 
    super(props);
    this.state = 
      post: null,
      comment: null
    
    this.handleChange = props.handleChange.bind(this);
  

  componentDidMount() 
    const  posts, match  = this.props;

    this.setState(
      post: posts.length
        ? posts.find(p => p._id === match.params.id)
        : null,
      userId: localStorage.getItem('userId')
    )
  

  componentDidUpdate(prevProps) 
    const  posts, match, isAuthed  = this.props;

    if (JSON.stringify(prevProps) === JSON.stringify(this.props)) 
      return;
    

    this.setState(
      post: posts.length
        ? posts.find(p => p._id === match.params.id)
        : null
    );
  

  render() 
    const  post  = this.state;
    const  isAdmin, isAuthed  = this.props;

    if (!post) 
      return <span>Loading post ...</span>;
    

    return (
      <section className="site-section py-lg">

           <form onSubmit=(e)=> this.props.handleSubmit(e, this.state) className="p-5 bg-light">

              <div className="form-group">
                <label htmlFor="message">Message</label>
                <textarea name="comment" id="message" onChange=this.handleChange cols=30 rows=10 className="form-control" defaultValue= "" />
              </div>
              <div className="form-group">
                 <input type="submit" defaultValue="Post Comment" className="btn btn-primary" />
              </div>
           </form>
       </section>
    );
  


export default Details;

任何帮助都感激不尽！