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

【问题标题】：useEffect is not called appropriate time, so useState in useEffect is not workinguseEffect 没有调用合适的时间，所以 useEffect 中的 useState 不起作用
【发布时间】：2020-07-13 01:29:38
【问题描述】：

我想显示来自服务器的实时数据数组（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。

【问题讨论】：

我想获取数据数组并在视图中显示它们，而无需单击按钮或其他任何东西。但是这段代码什么也没显示。谢谢你，我编辑了我的问题
您是否希望 onConnect 和 activate 功能运行？我相信 useEffect 将在组件安装时首先运行，并且只有在您通过 [] 作为第二个参数时才会运行。
如果您希望从 client.activate() 返回数据，您可以将其添加到 useEffect 中。如果方法是异步的，则添加正确的关键字。如果您希望 client.activate 在组件的整个生命周期中运行，则将其添加到另一个 useEffect 中。
你没有使用适当的 React 原则。您使用什么库与服务器通信？
您可能应该将您的问题更改为“如何根据实时更新数据更新组件状态”。您还应该提供更多上下文；您引用了许多未以我们可以看到的方式定义的函数，或者引用了库。提供的信息很难提供有意义的建议。

标签： reactjs react-hooks setstate

【解决方案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>
    )
}

【讨论】：