ReactJS：无法对未安装的组件执行 React 状态更新答案

【问题标题】：ReactJS : Can't perform a React state update on an unmounted componentReactJS：无法对未安装的组件执行 React 状态更新
【发布时间】：2020-03-26 04:34:01
【问题描述】：

我正在尝试在 onClick 方法调用的函数上使用“useHistory”（来自 react-router-dom）推送方法。尽管我在控制台中收到错误消息，但重定向工作正常：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消所有订阅和异步任务 componentWillUnmount 方法。

我的路由在 My 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>
  )

}

对导致错误/警告的原因有什么想法吗？

【问题讨论】：

您可能在路由转换前后进行了异步操作。顺便说一句，Tree 来自哪里？
TransformComponent 有没有做动画，这也是第三方吗？
好吧，我的猜测是它没有清理卸载或类似的东西。我会检查this issue，也许你只需要获取最新版本的库。为了确保它的react-zoom-pan-pinch“故障”，我会尝试在没有它的情况下运行应用程序，看看是否收到相同的警告。
NP，至于你得到的警告，我写了an article。希望有帮助
顺便说一句，我删除了该组件，它不再抛出该错误，但我真的需要该组件的能力

标签： reactjs react-router

【解决方案1】：

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

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

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

【讨论】：