Javascript 如何倾听React中的外部变量变化
希望你做得很好:) 我有一个“auth.js”文件,带有一个aysnc函数来获取用户ID,然后将其存储在会话存储中。这是:Javascript 如何倾听React中的外部变量变化,javascript,reactjs,variables,axios,Javascript,Reactjs,Variables,Axios,希望你做得很好:) 我有一个“auth.js”文件,带有一个aysnc函数来获取用户ID,然后将其存储在会话存储中。这是: export let userId = sessionStorage.getItem("userId"); const getUserId = async () => { if (token) { await axios .get(`${baseURL}/auth/user`, { headers: {
export let userId = sessionStorage.getItem("userId");
const getUserId = async () => {
if (token) {
await axios
.get(`${baseURL}/auth/user`, {
headers: {
authorization: token
}
})
.then(function (response) {
const { data } = response;
return sessionStorage.setItem("userId", data.userId);
})
.catch(function (err) {
return undefined;
});
}
};
getUserId();
然后我在所有需要它的组件中访问这个变量,以便发出其他请求。App.js中的示例:
useEffect(() => {
getActiveGames();
if (token && userId) {
getCart();
getWallet();
getWalletPayments();
}
}, []);
问题是,在第一次渲染中,用户ID为null(显然),我正在尝试不同的方法来更新甚至重新渲染,以获得更新的值,但似乎没有任何效果。
我知道有一个基本的解决办法,但我就是想不出来
如果您能提供帮助,那就太棒了:)我认为您可以使用状态管理器(如redux或contex api来更新状态用户ID,例如:
.then(function (response) {
const { data } = response;
// here you set your state (userId = data.userId)
return sessionStorage.setItem("userId", data.userId);
})
我希望它对您有效选项1
:如果您想知道何时在会话存储中填写用户ID:
userId
存储
事件。看useffect
中将userId添加为依赖项用户ID
getUserId
中返回data.userId
令人惊叹的!非常感谢你!干净的和描述性的。它成功了:我会很安全的欢迎你..编码快乐!
const getUserId = ()=> sessionStorage.getItem("userId");
const [userId, setUserId] = useState(getUserId());
useEffect(() => {
const storage = (event) => {
if(event.originalEvent.storageArea===sessionStorage){
const data = getUserId();
if(data) setUserId(data);
}
};
window.addEventListener("storage", storage);
return ()=> window.removeEventListener("storage", storage)
}, []);
useEffect(() => {
getActiveGames();
if (token && userId) {
getCart();
getWallet();
getWalletPayments();
}
}, [userId]);
const UserContext = React.createContext();
const UserProvider = ({children}) => {
const [userId, setUserId] = useState(null);
useEffect(()=> {
getUserId()
.then(user => setUserId(user));
}, []);
return <UserContext.Provider value={userId}>
{children}
</UserContext.Provider>
}
return (<UserProvider>
...
</UserProvider)
const userId = useContext(UserContext);
useEffect(() => {
getActiveGames();
if (token && userId) {
getCart();
getWallet();
getWalletPayments();
}
}, [userId]);