时间戳

首页 > 解决方案 > useEffect 没有调用合适的时间，所以 useEffect 中的 useState 不起作用

reactjs - useEffect 没有调用合适的时间，所以 useEffect 中的 useState 不起作用

问题描述

我想显示来自服务器的实时数据数组（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) 无效。我认为这是因为当 'cl' 发生变化时没有调用 useEffect 。

标签： reactjsreact-hookssetstate

解决方案

问题是 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>
    )
}

推荐阅读