autorun 放在 componentDidMount 导致方法调用两次 解决方法代码

以下是一个示例代码，展示了如何在 componentWillUnmount 中清除 autorun：

import React, { Component } from 'react';
import { autorun } from 'mobx';

class MyComponent extends Component {
  state = {
    data: null,
  };

  componentDidMount() {
    this.disposer = autorun(() => {
      // 获取并更新数据
      const data = someStore.getData();
      this.setState({ data });
    });
  }

  componentWillUnmount() {
    // 在组件卸载之前清除 autorun
    this.disposer();
  }

  render() {
    // 渲染数据
    return <div>{this.state.data}</div>;
  }
}

在 componentDidMount 中创建 autorun 并将其返回的清除函数保存在组件实例上。在 componentWillUnmount 中调用该函数以清除 autorun。这样可以确保 autorun 不会在组件卸载后继续执行。

相关问题

autorun 放在 componentDidMount 导致方法调用两次

可能是因为使用了 React Router 的路由导致 componentDidMount 被调用了多次。在页面切换时，React Router 会卸载当前组件并重新挂载下一个组件，因此 componentDidMount 会被调用多次。

为了解决这个问题，可以考虑在 componentWillUnmount 中清除 autorun。在组件卸载之前，使用 autorun 返回的清除函数清除 autorun。这样可以避免在组件被卸载之后 autorun 继续执行导致的问题。