如何更新useEffect中的状态对象

Question

如何在useEffect 中更新状态对象

大家好，

在我的React应用程序中，我正在呼叫一个在线服务，以获取一些WIFI信息。最后，我想向用户展示\呈现wifi数据的信息。

const [macAddress, setMacAddress] = useState('');
const [wifiData, setwifiData] = useState({});
const axios = require("axios");
const ClientOAuth2 = require('client-oauth2')
const clientAuth = new ClientOAuth2({
accessTokenUri: 'https:....',
clientId: '....',
clientSecret: '....',
scopes: ['....']
})
const wifiService = useCallback(() => {
clientAuth.credentials.getToken().then(function (user) {
if (user.accessToken) {
axios({
method: "post",
url: "....access_token=" + user.accessToken,
data: {
....,
},
}).then(function (response) {
// setwifiData ??
console.log(response.data)
}).catch(function (error) {
console.log(error);
});
}
})
}, [axios, clientAuth.credentials, macAddress])
useEffect(() => {
if (!openDrawer && macAddress !== "") {
wifiService();
// setwifiData ??
}
}, [wifiService, clientAuth.credentials, openDrawer, macAddress]);
return (
<div style={{ padding: 20 }}>
// render wifiData
)

如何将响应数据存储在wifiData中？

处理这种情况的正确方法是什么？我想不通。

感谢的帮助

谢谢

Answer 1

设置wifiService((内部的状态：

const wifiService = useCallback(() => {
clientAuth.credentials.getToken().then(function (user) {
if (user.accessToken) {
axios({
method: "post",
url: "....access_token=" + user.accessToken,
data: {
....,
},
}).then(function (response) {
// ** put response in correct format here if you need to
setwifiData(response)
console.log(response.data)
}).catch(function (error) {
console.log(error);
});
}
})
}, [axios, clientAuth.credentials, macAddress])

从useEffect触发器中删除wifi服务以防止无限循环：

useEffect(() => {
if (!openDrawer && macAddress !== "") {
wifiService();
}
}, [clientAuth.credentials, openDrawer, macAddress]);