我正在 useEffect 內部進行 api 呼叫以獲取用戶資料，然后嘗試更新用戶狀態，但問題是，即使我成功地從 axios 呼叫中獲取了用戶，用戶狀態仍堅持為 null
這是我的代碼：
AuthContext.js :
import { createContext , useState ,useEffect } from 'react'
import axios from 'axios'
export const AuthContext = createContext()
const AuthState = ({children}) => {
const [user , setUser] = useState(null)
useEffect(() => {
const fetchUser = async () => {
try {
const res = await axios.get('http://localhost:8000/auth/user' , { withCredentials : true })
console.log ('user in response => ' , res.data)
setUser(res.data)
console.log ('user in state => ' , user)
} catch(err) {
console.log('There was a problem')
}
}
fetchUser()
},[])
return (
<AuthContext.Provider value={user}>{children}</AuthContext.Provider>
)
}
export default AuthState
索引.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import AuthState from './AuthContext'
ReactDOM.render(
<React.StrictMode>
<AuthState>
<App />
</AuthState>
</React.StrictMode>,
document.getElementById('root')
);
控制臺輸出 (img) : 控制臺輸出
為什么 setUser 不更新用戶狀態？
uj5u.com熱心網友回復：
在這里，用戶資料實際上正在正確更新。
擁有console.log('user in state => ' , user)// 不是正確的測驗方式。這給出了 null 因為在 useEffect 中沒有發生重新渲染。要重新渲染影響使用效果，您需要在依賴項陣列 [user] 中添加用戶。
但是您不需要對代碼進行任何更改，因為它可以正常作業。為了測驗這個，我建議在 index.js 中添加這些。
ReactDOM.render(
<React.StrictMode>
<AuthState>
<AuthContext.Consumer> // <--To test
{(user) => <div>{user && user.id}</div>} // <--To test
</AuthContext.Consumer> // <--To test
<App />
</AuthState>
</React.StrictMode>,
document.getElementById('root')
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399849.html
上一篇：僅當所選文本穩定時才運行該操作
下一篇：在TSX上沒有過載匹配此呼叫錯誤