Socket.IO配合React实现广播时调用socket.on报null属性读取错误

错误根因 #

App组件中socket的初始状态为null，子组件Dashboard首次渲染时接收到的socket参数还未完成初始化，此时useEffect直接执行socket.on()就会触发空指针报错。你之前调用emit方法未报错是因为该方法仅在点击按钮时触发，此时socket已经完成初始化赋值。

修复方案 #

方案1：子组件内增加非空判断，同时补充事件解绑逻辑避免内存泄漏

修改dashboard.js中的useEffect部分：

useEffect(() => {
    // 新增非空判断，仅当socket实例存在时才绑定事件
    if (!socket) return;
    const handleToggle = (type) => {
        console.log(type);
    };
    socket.on('toggle button', handleToggle);
    // 组件卸载时解绑事件，避免重复绑定和内存泄漏
    return () => {
        socket.off('toggle button', handleToggle);
    };
}, [socket]);

同时建议给toggleLight方法也增加非空判断，避免socket未初始化时点击按钮触发报错：

function toggleLight(type) {
    if(type && socket) {
        socket.emit("toggle light", type);
        console.log(type);
    }
}

方案2：父组件等待socket初始化完成后再渲染子组件

修改App.js的渲染逻辑，仅当socket实例存在时才渲染Dashboard：

return (
    <Router>
        <div className="app">
            <div className="app__view">
                <Switch>
                    <Route exact path="/">
                        {/* 新增判断，socket初始化完成后再传递给子组件 */}
                        {socket && <Dashboard socket={socket} />}
                    </Route>
                </Switch>
            </div>
        </div>
    </Router>
);

内容的提问来源于stack exchange，提问作者Jonas