reactjs - ReactJS：无法在未安装的组件上执行React状态更新(ReactJS : Can't perform a React state update on an unmounted component)

Question

I'm trying to use the 'useHistory' (from react-router-dom) push method on a function that is called by onClick method.

(我正在尝试在onClick方法调用的函数上使用“ useHistory”（来自react-router-dom）推送方法。)

The redirect work fine although i get an error in the console that states:

(尽管我在控制台中指出以下错误，但重定向工作正常：)

Warning: Can't perform a React state update on an unmounted component.

(警告：无法在已卸载的组件上执行React状态更新。)

This is a no-op, but it indicates a memory leak in your application.

(这是空操作，但它表明应用程序中发生内存泄漏。)

To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

(要解决此问题，请在componentWillUnmount方法中取消所有订阅和异步任务。)

My routing is handled in My App.js as follows:

(我的路由在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>
  );
}

and the component that pushes to the router after onClick event:

(以及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>
  )

}

any idea on what is causing the error/warning?

(关于什么原因导致错误/警告的任何想法？)

  ask by teamdever translate from so

Answer 1

This warning is usually thrown when there is an asynchronous operation with a state update involved.

(当存在涉及状态更新的异步操作时，通常会引发此警告。)

By looking at the code you posted it seems there is no async operation that made directly by you, but maybe by a third party library.

(通过查看您发布的代码，似乎没有直接由您（但可能是第三方库）直接进行的异步操作。)

It seems like you are using the react-zoom-pan-pinch library with the TransformComponent which is doing some animations (async operation).

(似乎您正在将react-zoom-pan-pinch库与TransformComponent一起使用，该库正在执行一些动画（异步操作）。)

By searching through their issues i came a cross some related issues such as #30 and #32 , it seems to be resolved so you may need to get the latest version.

(通过搜索他们的问题，我遇到了一些相关问题，例如＃30和＃32 ，它似乎已解决，因此您可能需要获取最新版本。)

If you still having issues I think its best to open a new issue in their repository.

(如果您仍有问题，我认为最好在其资料库中打开一个新问题。)

As for the warning itself, I wrote an article about it which might help you understand it better.

(至于警告本身，我写了一篇有关警告的文章 ，它可能有助于您更好地理解它。)