Как исправить nextCreate не является функцией настройки useMemo настройка аутентификации реагирует на роутер и перехватывает

Question

Я пытаюсь использовать контекст для создания провайдера аутентификации для моего приложения.Следуйте инструкциям по аутентификации с помощью реагирующего маршрутизатора и реагирующих перехватчиков.Он использует памятку для получения аутентификации при изменении аутентификации.

Это руководство, которому я следовал https://medium.com/trabe/implementing-private-routes-with-react-router-and-hooks-ed38d0cf93d5

Я пытался найти ошибку и обойти памятку безрезультатно.

Вот мой провайдер

const AuthDataContext = createContext(null)

const initialAuthData = {}

const AuthDataProvider = props => {
  const [authData, setAuthData] = useState(initialAuthData)

  useEffect(() => {
    async function getAuth(){
      let currentAuthData = await fetch("URL/api/v1/logged_in", {
        method: "GET",
        credentials: "include",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        }
      })
        .then(res => res.json())
        .then(data => (data))
        .catch(error => console.error("Error:", error));

        if(currentAuthData) {
          setAuthData(currentAuthData)
        }
    };
    getAuth()
  },[])

  const onLogout = () => setAuthData(initialAuthData);

  const onLogin = newAuthData => setAuthData(newAuthData);

  const authDataValue = useMemo({ ...authData, onLogin, onLogout }, [authData]);
  return <AuthDataContext.Provider value={authDataValue} {...props} />;
};

export const useAuthDataContext = () => useContext(AuthDataContext);

Компонент PrivateRoute

const PrivateRoute = ({ component, ...options }) => {
  const { user } = useAuthDataContext();
  const finalComponent = user ? component : SignInPage;

  return <Route {...options} component={finalComponent} />;
};

AuthProvider, обертывающий мое приложение

const MyApp = props => (
    <BrowserRouter>
      <AuthDataProvider>
        <App />
      </AuthDataProvider>
    </BrowserRouter>
);

Я ожидал, что провайдер авторизацииполучить пользовательский статус и статус Logged_In и предоставить его дочерним компонентам.Частный маршрут для просмотра authData из контекстного API и рендеринга маршрута, только если пользователь вошел в систему. Заранее спасибо!

useMemo выдает эту ошибку nextCreate не является функцией mountMemo

 13962 |   var hook = mountWorkInProgressHook();
 13963 |   var nextDeps = deps === undefined ? null : deps;
> 13964 |   var nextValue = nextCreate();
       | ^  13965 |   hook.memoizedState = [nextValue, nextDeps];
 13966 |   return nextValue;
 13967 | }

Просмотр скомпилирован

Answer 1

Ошибка "nextCreate is not a function" выдается, когда вы не передаете функцию в качестве аргумента useMemo(). Например, useMemo(123, []) выбросит, а useMemo(() => 123, []) - нет.

Answer 2

Вам не нужно использовать useMemo. Это будет дублировать то, что провайдер уже выполняет. Вместо

return <AuthDataContext.Provider value={{ authData, onLogin, onLogout }} {...props} />;