警告：无法对已卸载的组件执行 React 状态更新

Question

我收到以下警告：“警告：无法对已卸载的组件执行 React 状态更新。这是无操作，但它表明应用程序中存在内存泄漏。要修复，请取消所有订阅和异步任务在 useEffect 清理函数中。在 div 中的 AddComment（位于 CommentCard.js:50）中（由 Comment " 创建（CommentCard 中的第 50 行是 AddComment 组件所在的行）

我有CommentCard组件，它在 ant design 的Comment组件的帮助下显示评论。我使用 Comment 组件的 Children 属性来显示特定评论的AddComment组件。

AddComment组件添加对评论的回复。为了显示相应评论的AddComment组件，我使用了状态数组，并且仅针对状态等于 1 的评论显示该组件。

添加回复后，我希望删除AddComment组件。为此，我在成功添加回复后更改了评论的状态。我发布回复后立即收到警告。

这是我的 CommentCard 组件

function CommentCard(props) {

  const [hasReplyCommentBox, setHasReplyCommentBox] = useState([]);

  const { t } = useTranslation();

  const commentStyle = {

    padding: '10px',

    backgroundColor: 'white',

    'whiteSpace': 'pre',

    width: '100%'

  };

  function toggleReplyBoxVisibility(commentIndex) {

    var auxState = { ...hasReplyCommentBox };

    auxState[commentIndex] = auxState[commentIndex] ? 0 : 1;

    setHasReplyCommentBox(auxState);

  }

  const actions = [

    <span

      id={"reply-button-" + props.commentIndex}

      onClick={() => toggleReplyBoxVisibility(props.commentIndex)}>

      {t('Reply to')}

    </span>

  ];

  const commentReplyBox = (

    hasReplyCommentBox[props.commentIndex]

      ? <AddComment

          id={props.codeId}

          parentCommentId={props.parentCommentId}

          commentIndex={props.commentIndex}

          toggleReplyBoxVisibility={toggleReplyBoxVisibility}

          updateComments={props.updateComments}

        />

      : null

  );

  return (

    <Comment

      author={props.userId}

      datetime={props.datePosted}

      content={props.body}

      actions={actions}

      children={commentReplyBox}

      style={commentStyle}

    />

  );

}

Answer 1

尝试这个function submitComment() {&nbsp; &nbsp; let request = {&nbsp; &nbsp; &nbsp; body: comment,&nbsp; &nbsp; &nbsp; code_id: props.id,&nbsp; &nbsp; &nbsp; line_number: props.lineNumber,&nbsp; &nbsp; &nbsp; parent_comment_id: props.parentCommentId&nbsp; &nbsp; };&nbsp; &nbsp; fetch('/api/comment/add',&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; method: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify(request)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ).then(response => response.json())&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; if (data.success === 1) {&nbsp; &nbsp; &nbsp; &nbsp; props.updateComments();&nbsp; &nbsp; &nbsp; &nbsp; resetCommentInput();&nbsp; &nbsp; &nbsp; &nbsp; // Run resetCommentInput before props.toggleReplyBoxVisibility&nbsp; &nbsp; &nbsp; &nbsp; if (props.parentCommentId) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; props.toggleReplyBoxVisibility(props.commentIndex);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }您应该在卸载之前更新组件状态