Question

在我的react应用程序中，我正在使用axios进行API调用。但是，在我的控制台中，我遇到了一个错误 “警告：无法在已卸载的组件上执行React状态更新。这是无操作，但表明您的应用程序存在内存泄漏。要修复，取消componentWillUnmount方法中的所有订阅和异步任务。” 我的代码在下面

要解决内存泄漏问题，我添加了_isMounted检查并控制台了_ismount。我的应用程序渲染了两次。首次控制台将_isMounted状态打印为true，然后为false（由于componentDidMount），但是会再次渲染该应用程序，并且在控制台中将_isMounted打印为true。

app.jsx
export class Test extends Component {
_isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      apiData: null
    }
  }
  componentDidMount() {
    this._isMounted = true;
    API.callAPI(this.setStateHandler, this._isMounted)
  }
  setStateHandler = (state) => {
    this.setState(state);
  }
 componentWillUnmount() {
    this._isMounted = false
  }
 render() {
  return(...)}

api.js
callAPI = (setStateHandler, _isMounted) => {
    axios.get('/article', {headers: {Authorization: token}})
    .then((response) => {
      if(_isMounted) {
        setStateHandler({ programs: response.data.data.programs });
      }
    })
  }

我想修复我的内存泄漏问题。我该如何解决？
为什么我的应用程序呈现两次，而第二次未调用componentDidUnmount？

我会很感激。

Answer 1

卸载组件时，传递给_isMounted的{{1}}参数不会改变。

您可以改为将数据返回到组件，并检查callAPI是否仍在this._isMounted那里。

示例

true

异步任务和订阅时ReactJS内存泄漏

1 个答案: