警告：无法对已卸载的组件执行 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() {

    let request = {

      body: comment,

      code_id: props.id,

      line_number: props.lineNumber,

      parent_comment_id: props.parentCommentId

    };

    fetch('/api/comment/add',

      {

        method: 'POST',

        body: JSON.stringify(request)

      }

    ).then(response => response.json())

    .then(data => {

      if (data.success === 1) {

        props.updateComments();

        resetCommentInput();

        // Run resetCommentInput before props.toggleReplyBoxVisibility

        if (props.parentCommentId) {

          props.toggleReplyBoxVisibility(props.commentIndex);

        }

      }

    });

  }

您应该在卸载之前更新组件状态