在 React 中使用 useEffect 的异步上下文

Question

我正在尝试使用从上下文组件接收到的 header 值创建一个 api 请求。但是，一旦加载页面组件，它就会抛出 Cannot read property '_id' of null 异常。有没有办法在加载上下文后立即运行 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>
    );
};

Answer 1

在呈现 GlobalProvider 之前设置一个条件，例如：

 return (
    {user.length&&<GlobalContext.Provider value={[user, setUser]}>
        {props.children}
    </GlobalContext.Provider>}
);

如果用户不是数组就使用这个

 return (
    {user&&<GlobalContext.Provider value={[user, setUser]}>
        {props.children}
    </GlobalContext.Provider>}
);

Answer 2

这里的问题是 useEffect 运行正在挂载，您还没有用户。您只需要防范这种情况

useEffect(() => {
  if (!user) return;

  // use user._id
},[user])

自然地，当 Context 获取用户时，它应该强制重新呈现您的组件，自然地 useEffect 应该重新运行因为依赖关系已经改变。

在 React 中使用 useEffect 的异步上下文

asynchronous context with useEffect in React

asynchronous

reactjs

react-context

react-hooks

use-effect