State 变量挂钩不适用于 useEffect 回调

Question

Attempting to set up a websocket connection within a react functional component, and update a state variable with a hook, like so [Ref 1]:

export default function foo() {
    const [ arr, setArr ] = useState([])
    ws = useRef(null)

    useEffect( () => {
        ws.current = new Websocket('ws://example.com:1234')
        ws.current.onmessage = (m) => {
            setArr([...arr, m])
        })
    }, []) // Runs once at mount
}

The state of arr is not preserved. It is overwritten.

NOTE I also tried passing arr into the effect, like so, but this resulted in an endless loop. [Ref 2]. As arr was updated, the effect was called...

        })
    }, [arr])
}

For a more specific example, take three websocket messages:

['a']
['b']
['c']

Expected arr on each message, after update

['a']
['a', 'b']
['a', 'b', 'c']

Result:

['a']
['b']
['c']

Why isn't arr stored with the setArr hook in the callback? Why is it an empty array?

References

1. WebSockets with functional components
2. https://github.com/facebook/react/issues/14066

Answer 1

You have

useEffect( () => {
    ws.current = new Websocket('ws://example.com:1234')
    ws.current.onmessage = (m) => {
        setArr([...arr, m])
    })
}, []) // Runs once at mount

Indeed, the effect hook there runs once on mount - and that's the problem. When it runs, the event listener that is attached, when triggered, runs this line:

setArr([...arr, m])

using the value of arr which is in scope for that handler. Since the handler is attached only once, on mount, the value of arr is always the same; the initial state, the empty array.

Use the callback instead:

setArr(arr => [...arr, m])

I'd also recommend declaring the ws with const , to avoid accidentally creating a global variable (and maybe call it wsRef rather than ws , so you don't confuse the ref for the socket):

const wsRef = useRef(null)

Answer 2

You can try to use the previous state of your array instead as:

ws.current.onmessage = (m) => {
   setArr(prevState => [...prevState, m])
}

For setState there are two approaches how you can handle the change, the first is to give a value as a parameter , the second option is the pass a callback function . It's called updater function which provides the previous value of the state. Read further about setState here .