Question

由于某种原因，它给出了一个错误，尽管此修补程序几乎适用于所有类，但不希望如此。

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请取消所有订阅和异步任务 componentWillUnmount方法。在测试中（在app.js：212）

class Test extends React.Component {
    _isMounted = false;

    constructor(props) {
        super(props);
        this.state = {
            timestamp: '-'
        };
    }

    componentDidMount() {
        this._isMounted = true;

        if (this._isMounted) {
            subscribeToTimer((err, timestamp) => this.setState({
                timestamp
            }));
        }
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        return (
            <div className="timer">
                <p className="timer-intro">
                    This is the timer value: {this.state.timestamp}
                </p>
            </div>
        );
    } 
}

功能：

import openSocket from 'socket.io-client';

const socket = openSocket('http://blablabla:3001');
function subscribeToTimer(cb) {
    socket.on('timer', timestamp => cb(null, timestamp));
    socket.emit('subscribeToTimer', 1000);
}

export { subscribeToTimer };

服务器：

const io = require('socket.io')();

io.on('connection', (client) => {
    client.on('subscribeToTimer', (interval) => {
        console.log('client is subscribing to timer with interval ', interval);
        setInterval(() => {
            client.emit('timer', Date.now());
        }, interval);
    });
});

const port = 3001;
io.listen(port);
console.log('listening on port ', port);

无法在已卸载的组件上执行React状态更新-Socket.IO

0 个答案: