Socket.io 没有从每个反应组件中删除监听器

Question

我想从 socket.io 客户端创建off 方法，以从所有反应组件中删除所有匹配运行的侦听器因为目前我正在两个不同的组件上侦听相同的事件，它们都在 componentDidMount 中，

Board.js

 socket.on('achievement', (data) => {
                const updateAchievement= [data, ...this.state.getAchievements];
                this.setState({
                    recentAchievements: this.state.recentAchievements.concat(data),
                    getAchievements: updateAchievement
                });
            });

仪表板.js

 socket.on('achievement', (data) => {
                const updateAchievement= [data, ...this.state.getAchievements];
                this.setState({
                    recentAchievements: this.state.recentAchievements.concat(data),
                    getAchievements: updateAchievement
                });
            });

目前，如果最终用户在 DashBoard.js 上关闭监听事件，Board.js 仍在积极接收我不想要的数据。 board.js 组件始终在视图中，这就是为什么我可以看到数据仍在出现的原因。

我如何退订

仪表板.js

componentWillUnmount(){
            socket.off("achievement");
     }

就像我上面说的，Board 组件始终在视图中，我仍然可以看到传入的数据。

我怎样才能阻止这种情况？

Answer 1

只需使用 componentWillUnmout() 生命周期方法通过处理程序调用 socket.off()。请注意，off() 要求将先前订阅的处理程序作为第二个参数传递：

class MyComponent extends Component {
    updateAchievement = data => {
        this.setState(prevState => ({
                    recentAchievements: [...prevState.recentAchievements, data],
                    getAchievements: [data, ...prevState.getAchievements]
        }));
    }

    componentDidMount() {
       socket.on('achievement', this.updateAchievement);
    }

    componentWillUnmount() {
       socket.off('achievement', this.updateAchievement);
    }

    // ...
}

请注意，更新状态时不应使用this.state。始终使用setState 的版本，该版本接受一个函数，其中第一个参数是先前的状态并基于该状态进行更新。