Laravel Echo监听时React State为空问题及状态便捷调用方法

问题原因 #

你遇到的data为null的情况，是React闭包特性导致的：第二个useEffect的依赖数组是空的，它只会在组件挂载时执行一次，此时捕获的是data的初始值null。即便第一个useEffect在挂载时更新了data，第二个useEffect的闭包不会自动更新，所以回调里的data始终是初始的null。

便捷解决方案 #

方案1：将data加入依赖数组并清理监听 #

把data放到第二个useEffect的依赖数组中，同时在useEffect的返回函数里移除Echo监听，避免重复绑定事件：

const [data, setData] = useState(null)

useEffect(()=>{
    setData({id:1, title:"hello world"})
},[])

useEffect(()=>{
    // 创建监听实例
    const listener = Echo.join('ChatMessage').listen('ChatMessage',(res) => {
        console.log(data) // 现在能拿到最新的data
    })

    // 组件卸载或依赖更新时，移除监听
    return () => {
        Echo.leave('ChatMessage')
        // 或者用更精确的移除方式：listener.stopListening('ChatMessage')
    }
},[data]) // 加入data作为依赖

方案2：用useRef保存最新状态 #

如果不想每次data更新都重新绑定Echo监听，可以用useRef维护最新的状态引用，回调里直接取ref.current：

const [data, setData] = useState(null)
const dataRef = useRef(null)

// 每次data更新时同步ref的值
useEffect(()=>{
    dataRef.current = data
},[data])

useEffect(()=>{
    setData({id:1, title:"hello world"})
},[])

useEffect(()=>{
    Echo.join('ChatMessage').listen('ChatMessage',(res) => {
        console.log(dataRef.current) // 直接获取最新的data
    })
},[])

方案3：使用useReducer（适合复杂状态逻辑） #

如果你的状态更新逻辑比较复杂，useReducer的回调里能直接拿到最新状态：

function dataReducer(state, action) {
    switch(action.type) {
        case 'UPDATE':
            return action.payload
        case 'LOG':
            console.log(state) // 这里能拿到最新状态
            return state
        default:
            return state
    }
}

const [data, dispatch] = useReducer(dataReducer, null)

useEffect(()=>{
    dispatch({type: 'UPDATE', payload: {id:1, title:"hello world"}})
},[])

useEffect(()=>{
    Echo.join('ChatMessage').listen('ChatMessage',(res) => {
        dispatch({type: 'LOG'})
    })
},[])

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