react中状态管理useState

时间:2024-07-19 07:24:07
    [secret,setSecret]=useState(null)
     useEffect(() => {
            http.get('/api/suggest/qrcode/', { params: { uniqueid: store.uniqueid } }).then(res => {
                //异步获取的值不是实时返回的
                setSecret(res.secret);
                return http.get('/api/suggest/userinfo/', { params: { secret: secret } })
            })
        // eslint-disable-next-line
    }, [])

在上面的代码中,我想实现的业务逻辑是:

1.页面挂载后,我先请求后台接口1获取二维码和密钥

2.然后请求接口2,携带上接口1返回的密钥参数,请求二维码的状态信息,获取用户信息。

这段代码我在运行的时候,后台始终拿到的secret值是null,通过后台、前台打印日志,显示的secret是有值的,但为什么按照顺序执行了setSecret(res.secret)后,然后使用secret的值,没有实时取得res.secret值。解释就是,有延迟,在我执行请求接口2的时候,secret的值还没有更新完成。

    //[secret,setSecret]=useState(null)
     useEffect(() => {
            http.get('/api/suggest/qrcode/', { params: { uniqueid: store.uniqueid } }).then(res => {
                //异步获取的值不是实时返回的
                //setSecret(res.secret);
                return http.get('/api/suggest/userinfo/', { params: { secret: res.secret} })
            })
        // eslint-disable-next-line
    }, [])

直接将接口1拿到的数据进行请求。这时后台能够正确拿到密钥信息进行后续处理。