ReactJS:Can'；t在未安装的组件上执行React状态更新

我试图对onClick方法调用的函数使用“useHistory”（来自react router dom）push方法。重定向工作正常，尽管我在控制台中收到一个错误，其中指出：

警告：无法对已卸载的组件执行React状态更新。 这是一个no-op，但它表示应用程序中存在内存泄漏。 若要修复，请取消中的所有订阅和异步任务 componentWillUnmount方法

我的路由在我的App.js中处理如下：

function App() {
  return (
    <Container style={{ display: 'flex', flexDirection: 'column' }}>
      <Router>
        <Row>
          <Col>
            <div className="tabs">
              <Switch>
                <Route path='/' exact component={Home} />
                <Route path='/staff' component={InsertingStaff} />
                <Route path='/students' component={InsertingStudents} />
                <Route path='/groups' component={ManageGroups} />
              </Switch>
            </div>
          </Col>
        </Row>
      </Router>
    </Container>
  );
}

函数应用程序（）{
返回(
);
}

以及onClick事件后推送到路由器的组件：

function GroupsTree() {
  let history = useHistory();

  function handleClick(group_item) {
    localStorage.setItem('selected_group', JSON.stringify(group_item))
    history.push("/groups");
  }

  const styles = {
    lines: {
      color: '#0064FF',
      height: '40px'
    },
    node: {
      backgroundColor: '#0064FF',
      border: '1px solid #1890ff',
    },
    text: {
      color: '#FFFFFF',
    }
  };
  const StyledTree = withStyles(styles)(Tree);
  return (
    <TransformWrapper doubleClick={{ disabled: true }} options={{ limitToBounds: false, minScale: 0.6 }} defaultScale={1}>
      <TransformComponent>
        <StyledTree data={data} direction={true} onClick={item => {
          handleClick(item);
        }}></StyledTree>
      </TransformComponent>
    </TransformWrapper>
  )

}

函数GroupsTree（）{
让历史=使用历史（）；
功能手柄点击（组\项）{
localStorage.setItem（'selected_group'，JSON.stringify（group_item））
历史推送（“/组”）；
}
常量样式={
线路：{
颜色：“#0064FF”，
高度：'40px'
},
节点：{
背景颜色：“#0064FF”，
边框：“1px实心#1890ff”，
},
正文：{
颜色：“#FFFFFF”，
}
};
const StyledTree=带有样式（样式）（树）；
返回(
{
把手舔（项目）；
}}>
)
}

---

知道是什么导致了错误/警告吗？

当异步操作涉及到状态更新时，通常会引发此警告。通过查看您发布的代码，似乎没有您直接执行的异步操作，但可能是由第三方库执行的

您似乎正在使用

react-zoom-pan-pinch

库和

TransformComponent

，后者正在执行一些动画（异步操作）。通过搜索他们的问题，我发现了一些相关的问题，例如和，似乎已经解决了，因此您可能需要获得最新版本。如果您仍然有问题，我认为最好在他们的存储库中打开一个新问题

---

至于警告本身，我写过它，这可能会帮助您更好地理解它。

在路由转换前后，您可能有一个异步操作正在进行中。顺便说一句，

Tree

从哪里来？TransformComponent是否正在制作动画，这也是第三方吗？嗯，我猜这不是卸载时清理或类似的事情。我会检查一下，也许你只需要得到图书馆的最新版本。为了确保它的

react-zoom-pan-pinch

“fault”我会尝试在没有它的情况下运行应用程序，看看我是否得到与您得到的警告相同的warning.NP，我写了它。希望它能帮助SBTW，我删除了组件，它不再抛出错误，但我真的需要该组件的能力