Question

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

}

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

Answer 1

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

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

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

ReactJS：无法在未安装的组件上执行React状态更新

1 个答案: