时间戳

首页 > 解决方案 > React Native - 应用程序在运行和应用“setInterval”后崩溃

javascript - React Native - 应用程序在运行和应用“setInterval”后崩溃

问题描述

我是来问一个我一天都解决不了的问题。

应用setInterval后，我的应用程序在物理 android 手机上崩溃，在我的模拟器中显示一个我不熟悉的错误。

在物理 android 手机和模拟器中，在我登录应用程序并在特定页面/屏幕上停留一分钟后，它会崩溃或显示错误。

这是我的代码

export default class tables extends Component {
    constructor(props){
        super(props)
        this.state = {
            data: [],
            ....
        }
    }
    fetchData = async () => {
        const response = await fetch('http://192.168.254.***:****/table');
        const json = await response.json();
        this.setState({ data: json });
    }

    componentDidMount = () => {
        this.Set_int = setInterval(() => {
            this.fetchData().then(() => {
                this.setState({ isLoading: false })
            });
        }, 5000);
    }

    componentWillUnmount = () => {
        clearInterval(this.Set_int);
    }

    render() {
        return (
            <View>
                 ....
                 .......
            </View>
        )
    }
}

这是错误：

在此处输入图像描述

我的控制台日志：

在此处输入图像描述

标签： javascriptandroidreactjsreact-nativesetinterval

解决方案

2693896在服务器日志中可能指的是响应长度，并且解析为对象的 2.6 Mb JSON 响应可能会占用大量 RAM。无论前一个请求是否完成，每 5 秒请求一次数据。如果客户端或服务器无法以该速度处理数据，请求和状态更新将累积并占用所有可用 RAM。

setInterval通常不应该与 Promise 一起使用，因为它忽略了 Promise 链。

为了改善这种情况，应该只在状态更新完成时安排一个新的间隔，或者如果应该保留 5s 间隔，可以使用abortable fetch取消请求。

推荐阅读