React Native实现加载器时报已卸载组件无法更新状态错误如何解决

云上老周

2026-10-21

你遇到的错误是因为在componentDidMount中注册的setInterval定时器没有在组件卸载时清除，定时器会持续执行回调调用setState，此时如果组件已经被销毁，就会触发该警告同时造成内存泄漏，按如下方式修改即可修复：

修复后完整代码

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AnimatedLoader from 'react-native-animated-loader';


export default class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
    // 存储定时器ID
    this.timerId = null;
  }

  componentDidMount() {
    // 保存定时器ID到实例属性
    this.timerId = setInterval(() => {
      // 改用函数式更新更稳妥，避免依赖外部state出现脏数据
      this.setState(prevState => ({
        visible: !prevState.visible
      }));
    }, 6000);
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  }

  render() {
    const { visible } = this.state;
    return (
        <View backgroundColor={'black'} style={{ flex: 1, justifyContent:'center' }}>
      <AnimatedLoader
        visible={visible}
        overlayColor="white"
        source={require("./loader.json")}
        animationStyle={styles.lottie}
        speed={1}
      >
        <Text>Doing something...</Text>
      </AnimatedLoader>
      </View>
    );
  }
  
}


const styles = StyleSheet.create({
  lottie: {
    width: 100,
    height: 100
  }
});