Question

使用模式时，我无法使用useEffect来获取注释。我有一个显示在模式内部的PostMain组件，如下所示。在此内部，有一个CommentList子组件，可从服务器获取帖子下方的评论。我创建了一个自定义钩子来处理此问题，如下所示。我面临的问题是，无论何时退出模态，然后重新打开模态，都会触发useEffect，即使其依赖项（pageNumber，postId）没有改变。发送与初始请求类似的服务器请求，并将相同的注释添加到列表中，如下面的屏幕快照所示。显然，这是不理想的。那么，我在做什么错呢？我该如何解决？

获取评论自定义钩子

    import { useEffect } from 'react';
    import { useSelector, useDispatch } from 'react-redux';

    import { fetchComments } from '../store/comments/actions';

    function useFetchComments(pageNumber, commentsPerRequest = 5, postId) {
      const { error, hasMoreComments, isLoading, commentList } = useSelector(
        ({ comments }) => ({
          error: comments.error,
          hasMoreComments: comments.hasMoreComments,
          isLoading: comments.isLoading,
          commentList: comments.commentList,
        })
      );

      const currentCommentListLength = commentList.length || 0;

      const dispatch = useDispatch();

      useEffect(() => {
        dispatch(fetchComments(pageNumber, commentsPerRequest, currentCommentListLength, postId));

        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [pageNumber, postId]);

      return {
        error,
        hasMoreComments,
        isLoading,
        commentList,
      };
    }

    export default useFetchComments;

发布组件

    import React from 'react';
    import { useSelector } from 'react-redux';
    import { Image, Modal } from 'semantic-ui-react';

    import CommentForm from '../../forms/comment';
    import CommentList from '../../shared/comment-list';

    function PostMain({ post }) {
      const { isLoggedIn } = useSelector(({ auth }) => ({
        isLoggedIn: auth.isLoggedIn,
      }));

      return (
        <Modal size="tiny" trigger={<Image src={post.url} />}>
          <Modal.Content>
            <div>
              <Image src={post.url} />
              <CommentList postId={post._id} />
              {isLoggedIn && (
                <CommentForm postId={post._id} />
              )}
            </div>
          </Modal.Content>
        </Modal>
      );
    }

    export default PostMain;

评论列表组件

    import React, { useState } from 'react';

    import { useFetchComments } from '../../../hooks';

    function CommentList({ postId }) {
      const COMMENTS_PER_REQUEST = 5;

      const [pageNumber, setPageNumber] = useState(1);
      const { error, isLoading, commentList, hasMoreComments } = useFetchComments(
        pageNumber,
        COMMENTS_PER_REQUEST,
        postId
      );

      const handleFetchMoreComments = () => {
        setPageNumber((previousNumber) => previousNumber + 1);
      };

      return (
        <div>
          <div>
            {commentList.map((comment) => (
              <div key={comment._id}>{comment.body}</div>
            ))}
            {hasMoreComments && (
              <p onClick={handleFetchMoreComments}>View More</p>
            )}
          </div>
          {isLoading && <p>Loading...</p>}
          {error && <p>{JSON.stringify(error)}</p>}
        </div>
      );
    }

    export default CommentList;

打开模式的第一个实例

打开模式的第二个实例

在使用模态时，为什么在不更改依赖项的情况下触发useEffect？

0 个答案: