具有 useState 的数组未更新 websocket function 内的值

Question

I am trying to change the state of an array when an event happens in the browser, specifically when the websocket is triggered, the problem is that my array keeps the original state and never changes. Thanks for your help

  export default function StreamPanel(){

   const [streamsNotRead, setStreamsNotRead] = useState(["bye"]);

   function costumerInfo () {
        return new Promise(resolve => {
        setTimeout(() => { 
    
        const cable = ActionCable.createConsumer(`wss:/aplace`)
        const sub = cable.subscriptions.create('SomeChannel', {
          received: handleReceiveNewName
        })
        handleClose()
        resolve()   
      },3000);
    });
      }

   const handleReceiveNewName = m => {
        setStreamsNotRead(streamsNotRead => [...streamsNotRead, "hello" ]);
        console.log(streamsNotRead)
   }

   return(</div>)
}

The function handleReceiveNewName is triggered when a certain event (the cable) in the browser happens, but when I want to access the value in the console.log "hello" is never added

Answer 1

Pass the new array directly to the function instead of a function returning the new array

const handleReceiveNewName = m => {
    setStreamsNotRead([...streamsNotRead, "hello" ]);
    console.log(streamsNotRead)
}