时间戳

首页 > 解决方案 > ReactJS：无法对未安装的组件执行 React 状态更新

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

问题描述

我正在尝试在 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>
  )

}

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

标签： reactjsreact-router

解决方案

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

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

至于警告本身，我写了一篇关于它的文章，它可能会帮助你更好地理解它。

推荐阅读