Как получить доступ к данным из провайдера контекста, используя useContext?

Question

Как получить доступ к данным из провайдера контекста, используя useContext, когда все значение передается внутри значения

Предположим, мое состояние выглядит следующим образом

const state = {
    isAuthenticated: false,
    Key: 12345,
    data: "Hi"
};

Я передал это состояние внутри контекста API по поставщику

        <AuthContext.Provider 
            value = {{state , dispatch}}
        >
        </AuthContext.Provider>

Теперь я пытаюсь получить доступ к нему в другом компоненте таким образом, но он выдает ошибку

const { {state.key: auth},{state.data : data} } = useContext(AuthContext)

Теперь я могу использовать auth и data где угодно внутри jsx

Как я хочу получить доступ к ключу и данным из контекста API

Answer 1

Чтобы вы могли использовать хук React useContext, вам нужно обернуть компоненты поставщиком контекста. Подробнее о Context API .

Вот пример для вашего случая:

import React from "react";

const AuthContext = React.createContext();

function AuthProvider(props) {
  const [state] = React.useState({
    isAuthenticated: false,
    key: 12345,
    data: "Hi",
  });

  // Any function has to be wrapped in a React.useCallback
  // to avoid re-calculation in any dependency array
  const dispatch = React.useCallback(() => {}, []); // Redux or useReducer dispatch

  // We have to wrap our values in React.useMemo to avoid any unnecessary re-renders
  const values = React.useMemo(
    () => ({
      state,
      dispatch,
    }),
    [dispatch, state]
  );

  return <AuthContext.Provider value={values} {...props} />;
}

function useAuth() {
  const context = React.useContext(AuthContext);
  if (!context) {
    throw new Error(
      "To utilize `useAuth`, component must be wrapped in `AuthProvider`"
    );
  }
  return context;
}

function Component() {
  const {
    state: { data, key },
  } = useAuth();

  // ...
}

function App() {
  return (
    // Everything wrapped in AuthProvider will have access to its values
    <AuthProvider>
      <Component />
    </AuthProvider>
  );
}

Answer 2

Ваш другой компонент должен быть включен в Context Provider.

Документы: https://pt-br.reactjs.org/docs/hooks-reference.html#usecontext