Mernstack。如何在React上创建评论后立即重新加载评论

import React, { useState, useEffect } from 'react';

const CommentList = () => {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    // 在组件加载时从后端获取评论数据
    fetch('/api/comments')
      .then(response => response.json())
      .then(data => setComments(data));
  }, []);

  const handleSubmitComment = (comment) => {
    // 将评论数据发送到后端
    fetch('/api/comments', {
      method: 'POST',
      body: JSON.stringify(comment),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => response.json())
      .then(data => {
        // 更新评论列表的状态
        setComments([...comments, data]);
      });
  };

  return (
    <div>
      <h2>评论列表</h2>
      {comments.map(comment => (
        <div key={comment.id}>
          <p>{comment.text}</p>
          <p>作者：{comment.author}</p>
        </div>
      ))}
      <CommentForm onSubmit={handleSubmitComment} />
    </div>
  );
};

const CommentForm = ({ onSubmit }) => {
  const [text, setText] = useState('');
  const [author, setAuthor] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 构建评论对象
    const comment = { text, author };
    // 调用父组件传递的提交评论的方法
    onSubmit(comment);
    // 清空表单
    setText('');
    setAuthor('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>发表评论</h3>
      <div>
        <label>评论内容：</label>
        <textarea value={text} onChange={e => setText(e.target.value)} />
      </div>
      <div>
        <label>作者：</label>
        <input type="text" value={author} onChange={e => setAuthor(e.target.value)} />
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default CommentList;