React useState setter不能在axios的useEffect中工作

Question

promise.then()中的UseState setter不起作用

这是我的useEffect钩子

const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
// axiosClient.get('user').then((data) => console.log(data.data.data.id));
console.log(authAPI.isLoggedIn().then((res) => {
setIsLoggedIn(res)
console.log('done!', isLoggedIn)
}));
}, []);

这是我的api:

async isLoggedIn() {
try { 
const res = await axiosClient.get('user');
console.log(res.data.data)
if (res.data.data.id) {
return true;
}
} catch(err) {
return false
}
},

和this my client:

get(apiUrl) {
const response = axios({
method: 'get',
url: this.url + apiUrl,
withCredentials: true,
})
return response
},

当我在promise上使用.then((res) => res时，我得到了我想要的值，这是"true";然而，当我尝试用setIsLoggedIn(res)设置它时，它不起作用。它只是保持默认值false。我不明白为什么会这样。我有了值，我把它设置成。

Answer 1

这里的问题是console.log('done!'， isLoggedIn)正在记录isLoggedIn的前一个状态值，该值仍然为false，即使在调用了setIsLoggedIn(res)之后。

这是因为setIsLoggedIn是异步的，不会立即更新状态。因此，当您在调用setIsLoggedIn之后立即记录isLoggedIn时，它仍然显示先前的值。

要查看isLoggedIn的更新值，您可以使用console.log('done!'， res)而不是console.log('done!'， isLoggedIn)或将isLoggedIn添加到useEffect钩子的依赖项数组中，以便当isLoggedIn更改时，钩子再次运行并记录更新后的值。

这是你的代码的更新版本，添加了依赖数组:

const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
authAPI.isLoggedIn().then((res) => {
setIsLoggedIn(res)
console.log('done!', isLoggedIn)
});
}, [isLoggedIn]);

或者你可以直接记录isLoggedIn的更新值:

const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
authAPI.isLoggedIn().then((res) => {
setIsLoggedIn(res)
console.log('done!', res)
});
}, []);