我正在尝试使用从上下文组件接收到的 header 值创建一个 api 请求。然而,一旦页面组件被加载,它就会抛出一个 Cannot read property '_id' of null
异常(exception)。有没有办法在上下文加载后立即运行 useEffect 函数?
主要部件:
import React, { useState, useEffect, useContext } from "react";
import "./overview.scss";
/* COMPONENTS */;
import axios from 'axios';
import { GlobalContext } from '../../components/context/global';
const Overview = () => {
const [bookings, setBookings] = useState([]);
const [loaded, setLoaded] = useState(false);
const [user, setUser] = useContext(GlobalContext);
useEffect(() => {
axios
.get(`/api/v1/bookings/user/${user._id}`)
.then(res => setBookings(res.data))
.catch(err => console.log(err))
.finally(() => setLoaded(true));
}, [user]);
上下文组件:import React, {useState, useEffect, createContext} from 'react';
import jwt from 'jsonwebtoken';
/* GLOBAL VARIABLES (CLIENT) */
export const GlobalContext = createContext();
export const GlobalProvider = props => {
/* ENVIRONMENT API URL */
const [user, setUser] = useState([]);
useEffect(() => {
const getSession = async () => {
const user = await sessionStorage.getItem('authorization');
setUser(jwt.decode(user));
}
getSession();
}, [])
return (
<GlobalContext.Provider value={[user, setUser]}>
{props.children}
</GlobalContext.Provider>
);
};
最佳答案
这里的问题是 useEffect
正在挂载上运行,而您还没有用户。您只需要防范这种情况
useEffect(() => {
if (!user) return;
// use user._id
},[user])
自然地,当 Context 获取用户时,它应该强制重新渲染您的组件,当然
useEffect
应该在依赖项发生变化时重新运行。
关于reactjs - React 中带有 useEffect 的异步上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60209671/