Question

我想从socket.io客户端制作off方法，以从所有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");
     }

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

我该如何阻止呢？

Answer 1

只需使用componentWillUnmout()生命周期方法来通过处理程序调用{{1}}。请注意，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的版本，该版本带有一个函数，其中第一个参数是先前状态，并根据该状态进行更新。

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

1 个答案: