reactjs-在不刷新页面的情况下添加评论：useEffect用作功能组件中的组件DidUpdate

我有一个评论部分，当我写评论时，它存储在React Redux中。我以为一旦写好，它会自动出现在评论部分，但它不起作用。相反，我需要更改页面视图（不刷新），例如返回主页并返回，以查看添加的评论。

不知何故，每次我向Redux reducer发送调度时，我都需要使用Effect来运行，这就是为什么使用Effect具有

[dispatch]参数。但它不起作用。

我尝试过不带参数的useEffect，它导致了一个循环，这使得代码能够工作，因为注释被一次又一次地加载，但这是一个错误的举动。最终他们会禁止我使用数据库。

useEffect(() => {
    const loadComments = async (itineraryIdToCheck) => {
      await dispatch(commentsByItineraryId(itineraryIdToCheck));
    };
    loadComments(props.itineraryId);
  },  );

有人熟悉在这种情况下如何使用React hook Useffect吗？谢谢！

注释组件

function Comments(props) {

    const[newTextState, setState] = useState([])
  
    //Here I download fro the first time the comments. 
    const commentsData = useSelector((state) => state.comments.allComments);
    const authenticatedUser = useSelector((state) => state.members.user);
  
    const dispatch = useDispatch();
  
 
  
  //componentDidUpdate. This should load all comments once you have written one, that is 
  //once a dispatch has been used. 
  
    useEffect(() => {
      const loadComments = async (itineraryIdToCheck) => {
        await dispatch(commentsByItineraryId(itineraryIdToCheck));
      };
      loadComments(props.itineraryId);
    }, [dispatch]);
  
  
    
    //here is where I obtained the input data from the form, and create a new comment that is submit-button-comments
    //to react redux
    async function newComment(event) {
      event.preventDefault();
  
        
      const commentObject = {
        itineraryId: props.itineraryId,
        text: [newTextState],
        memberId: authenticatedUser._id,
        profilePicture: authenticatedUser.profilePicture,
        userName: authenticatedUser.userName,
        city: props.city,
      };
        turnos += 1;
      console.log("comentario objecto", commentObject)
     dispatch(commentsPostByItinerary(commentObject))
  
  
  
    }
    //here is the list of comments
  
    let mappingComments =
      commentsData &&
      commentsData
        .filter((x) => x.itineraryId === props.itineraryId)
        .map((y) => {
          return (
            <div class="d-flex flex-row p-3">
              <img
                src={y.profilePicture}
                width="40"
                height="40"
                class="rounded-circle mr-3"
              />
              <div class="w-100">
                <div class="d-flex justify-content-between align-items-center">
                  <div class="d-flex flex-row align-items-center">
                    <span class="mr-2">{y.userName}</span>
                  </div>{" "}
                  <small>{date.fromNow} </small>
                  <small>
                    Date: y.timestamp</small>
                </div>
                <p class="text-justify comment-text mb-0">{y.text}</p>
              </div>
            </div>
          );
        });
  
  
  
    return (
      <div class="container mt-5 mb-5">
        <div class="row height d-flex justify-content-center align-items-center">
          <div class="col-md-7">
            <div class="card">
              <div class="p-3">
                <h6>Comments</h6>
              </div>
  
              <div class="mt-3 d-flex flex-row align-items-center p-3 form-color">
  
                <img
                  src={authenticatedUser.profilePicture}
                  width="50"
                  class="rounded-circle mr-2"
                />
                  <form onSubmit={(e) => newComment(e)}>
                  <div class="d-flex justify-content-center">
                    <input id="input-comments"
                        type="text"
                        class="form-control"
                        placeholder="Enter your comment..."
                        onChange={(e) =>
                          setState(e.target.value)}
                      />   
                         <button id="submit-button-comments" type="submit">                
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                            <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
                          </svg>
                        </button> 
                        </div>
                  </form>
                       
              </div>
  
              <div class="mt-2">{mappingComments}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  export { Comments };