Javascript 警告：Can'；t在未安装的组件上执行React状态更新

我得到以下警告： 警告：无法对未安装的组件执行React状态更新。这是一个no op，但表示应用程序内存泄漏。若要修复，请取消useEffect cleanup函数中的所有订阅和异步任务。 在AddComment中（位于CommentCard.js:50） 在div中（由Comment创建）（CommentCard的第50行是AddComment组件所在的行）

我有一个CommentCard组件，它借助ant design中的comment组件来显示注释。我使用comment组件的children属性来显示特定注释的AddComment组件

AddComment组件为注释添加回复。 要为相应的注释显示AddComment组件，我使用了一个状态数组，并且只为状态等于1的注释显示组件

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

这是我的评论卡组件

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}
    />
  );
}

功能评论卡（道具）{
const[hasReplyCommentBox，setHasReplyCommentBox]=useState（[]）；
const{t}=useTranslation（）；
常量注释样式={
填充：“10px”，
背景颜色：“白色”，
'空白'：'pre'，
宽度：“100%”
};
函数切换ReplyBoxVisibility（commentIndex）{
var auxState={…hasReplyCommentBox}；
auxState[commentIndex]=auxState[commentIndex]？0:1；
setHasReplyCommentBox（auxState）；
}
常量动作=[
toggleReplyBoxVisibility（props.commentIndex）}>
{t（'Reply to'）}
];
常量commentReplyBox=(
hasReplyCommentBox[props.commentIndex]
? 
：null
);
返回(
);
}

下面是我的AddComment组件：

function AddComment(props) {
  const { t } = useTranslation();
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const [comment, setComment] = useState();

  const buttonStyle = { float: 'right' };

  function onCommentChange(newComment) {
    setComment(newComment.target.value);
  }

  function resetCommentInput() {
    setComment('');
  }

  function onFormReset() {
    form.resetFields();
  }

  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) {
        if (props.parentCommentId) {
          props.toggleReplyBoxVisibility(props.commentIndex);
        }
        props.updateComments();
        resetCommentInput();
      }
    });
  }

  return (
    <>
      <Form form={form} name="comment" className="comment-form"
        onFinish={submitComment}
        id={"add-comment-form" + props.parentCommentId}>
        <Form.Item name="body" label={t('Comment')}>
          <TextArea placeholder={t('Leave a comment')}
            onChange={onCommentChange}
            id={getCommentTextAreaId(props.lineNumber, props.parentCommentId)}
          />
        </Form.Item>
        <Form.Item style={buttonStyle}>
          <Space>
            <Button type="primary" htmlType="submit"
              id={
                getPostCommentButtonId(props.lineNumber, props.parentCommentId)
              }
              className = "comment-form-button" onClick={onFormReset}>
              {t('Post')}
            </Button>
            {props.parentCommentId
              ? <Button id={"cancel-add-reply-comment-" + props.parentCommentId}
                  type="secondary" className="comment-form-button"
                  onClick={
                    () => props.toggleReplyBoxVisibility(props.commentIndex)
                  }>
                  {t('Cancel')}
                </Button>
              : null
            }
          </Space>
        </Form.Item>
      </Form>
    </>
  );
}

函数AddComment（道具）{
const{t}=useTranslation（）；
const{TextArea}=输入；
const[form]=form.useForm（）；
const[comment，setComment]=useState（）；
const buttonStyle={float:'right'}；
更改建议的功能（新成员）{
setComment（newComment.target.value）；
}
函数resetCommentInput（）{
setComment（“”）；
}
函数onFormReset（）{
form.resetFields（）；
}
函数submitComment（）{
让请求={
正文：评论，
代码_id:props.id，
行号：props.lineNumber，
父注释id:props.parentCommentId
};
获取（'/api/comment/add'，
{
方法：“POST”，
正文：JSON.stringify（请求）
}
).then（response=>response.json（））
。然后（数据=>{
如果（data.success==1）{
if（props.parentCommentId）{
props.toggleReplyBoxVisibility（props.commentIndex）；
}
props.updateComments（）；
resetCommentInput（）；
}
});
}
返回(
{t（'Post'）}
{props.parentCommentId
？props.toggleReplyBoxVisibility（props.commentIndex）
}>
{t（'Cancel'）}
：null
}
);
}

试试这个

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);
        }
      }
    });
  }

---

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

谢谢您的回答！它帮助了我