Socket.io不会从每个React组件中删除侦听器

Question

我想off从socket.io客户端制作方法，以从所有React组件中删除所有匹配运行的侦听器，因为当前我正在侦听两个不同组件上的同一事件，两者都位于componentDidMount中，

Board.js

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

Dashboard.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组件始终在视图上，这就是为什么我仍然可以看到数据的原因。

我如何退订

DashBoard.js

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

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

我该如何阻止呢？

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带有第一个参数为先前状态的函数的版本，并根据该状态进行更新。