useEffect未被称为适当的时间，因此useEffect中的useState不起作用

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(不工作。我认为这是因为当"cl"发生变化时，useEffect没有被调用。

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>
)
}