useEffect не вызывается в соответствующее время, поэтому useState в useEffect не работает

Question

Я хочу отображать массив данных в реальном времени (JSON форма) с сервера.

function ServerTest(){
    var a  = new Array();
    const client = createClient();
    const queue = v4();

    var a  = new Array();
    var cl = new Array();
    const [valueA, setValueA]=useState(a)

    client.onConnect = function () {
        subscribe(client, 'admin', queue, (payload:any) => { 
            
            var c : any;
            var tmp: any
            a=payload.Conversations
            if(a!==null){
                a.map((item:any)=>{
                    cl.push(item.name)
                })
               
            }
            
        });
        
        publish(client, 'api', 'admin', queue, {});

    }
    client.activate();
    
    useEffect(()=>{
        setValueA(cl)
        console.log(valueA)
    },cl)
    
    return (         
    <div>A: {valueA} </div>
    )
}

export default ServerTest

В useEffect console.log (valueA) работает, но не работает только setValueA (cl). Я думаю, это потому, что useEffect не вызывается при изменении cl.

Answer 1

Проблема в том, что React не знает, что ваша переменная cl изменилась (потому что это не состояние)

Кроме того, вам вообще не нужно cl.

Просто оберните начальное соединение в useEffect и вызовите setValueA, когда получите данные.

function ServerTest(){    
    const queue = v4();
    const [valueA, setValueA]= useState()

    useEffect(() => {
        const client = createClient();
        client.onConnect = function () {
            subscribe(client, 'admin', queue, (payload:any) => { 
                if(payload.Conversations!==null){
                    setValueA(payload.Conversations.map((item:any)=>item.name))
                }
                
            });
            publish(client, 'api', 'admin', queue, {});
        }
        client.activate();
    }, [])
    
    return (         
    <div>A: {valueA} </div>
    )
}