javascript - Socket.io 没有从每个 react 组件中删除监听器

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
                });
            });

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 组件始终在 View 中，这就是为什么我可以看到数据仍在到来。

我如何退订

仪表板.js

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

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

我怎样才能阻止它？

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 的版本，它接受一个函数，其中第一个参数是先前的状态并基于该函数进行更新。