Question

我在更新已卸载组件上的状态时遇到一些问题，如下所示：

所有工作均按预期进行。删除注释后，模态关闭。但是我收到警告：

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消所有订阅和异步任务 componentWillUnmount方法

我知道导致问题的原因，但我不知道如何解决。这是我的数据流：

此函数调用一个负责删除用户帖子的操作：

async handleDelete() {
   const { articleID, comment, deleteComment } = this.props;
   await deleteComment({ articleID, idcomment: comment.idcomment });

   //showModal flag is set to false - hide confirmation modal after clicking 'yes' button
   this.setState({showModal: !this.state.showModal})
}

在“ deleteComment”上方列出的操作如下：

export const deleteComment = data => async dispatch => {
  const { idcomment, articleID } = data;
  try {
    await axios.post(`/api/comments/${idcomment}`, {_method: 'DELETE'});
    //fetchling comments again to update a state and it looks like it causes the problem with updating a state on unmounted component because when I commented out that line, it didnt happen anymore.
    await dispatch(fetchComments(articleID)); 
  }
  catch(e) {
    throw new Error(e) }
  finally {
    dispatch(setCommentStatus(true));
    dispatch(decCommentCount());
  }
}

我的问题不是，如何解决？从数据库删除注释并且新的注释集已经更新后，我想关闭确认模式。

这是我使用模态的方式：

 <Modal
   showModal={showModal}
   accept={this.handleDelete}
   denied={() => this.setState({showModal: !this.state.showModal})}
 />

最后一个是模态本身：

return (
      !showModal
      ? ''
      : (
        <Wrapper>
          <ModalSection>
            <Header>
              <Title>Usunięcie komentarza</Title>
              <ButtonExit onClick={denied}>❌</ButtonExit>
            </Header>
            <Text>Czy jesteś pewien, że chcesz usunąć ten komentarz? <br /> Nie będziesz mógł cofnąć tej operacji.</Text>
            <Footer>
              <div>
                <Button onClick={denied}>Cofnij</Button>
                <Button warning onClick={accept}>Usuń</Button>
              </div>
            </Footer>
          </ModalSection>
        </Wrapper>
      )
    )

Answer 1

这是因为您正在尝试关闭Modal组件的状态。相反，您应该在父组件中保持注释删除状态，而该组件将呈现Modal组件。并使用回调更新Parent组件中的状态。该回调可以作为prop传递给Modal组件，并在发生删除操作时调用。这应该可以解决问题。

Answer 2

显然，它是从handleDelete函数中删除this.setState({showModal: !this.state.showModal})后起作用的。奇怪的是在完成删除注释后，我的模态正在关闭，我不知道该怎么办。。将showModal值更改为false的某件事...仍在弄清楚。

编辑：IM DUMB。删除评论后，我再次获取评论列表，并且该组件的showModal状态默认情况下设置为FALSE，因此当组件重新呈现时，该状态的默认值为false ................ ..对不起。

Answer 3

您不应使用Tenary来渲染模态（!showModal ? '' : <...>），而应将一个道具传递给模态，该道具只能隐藏或显示模态。
如果您看到某些库，它们具有show属性或isOpen

例如react-bootstrap react-modal

他们有那种道具，所以您不会像以前那样犯错误。

关于卸载组件的状态更新-如何解决？

3 个答案: