Почему useContext выдает ошибку при попытке получить его значения?

Question

[Boris007]

Создал отдельный файл для контекста

import { createContext } from 'react'
export const AuthContext = createContext({})

Добавил его в родительский компонент

import { useState } from 'react'
import { Form } from './app.tsx'
import { AuthContext } from './store/context'

export function App() {
    const [currentUser, setCurrentUser] = useState(null)
    return <>
    <AuthContext.Provider value={[currentUser, setCurrentUser]}>
        <Form />
    </AuthContext.Provider>
    </>
}

Но при попытке использовать его в дочернем компоненте

export function Form() {
  const [currentUser, setCurrentUser] = useContext(AuthContext)
  ....
}

Выдает ошибку

Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator.

Comments

[szQocks]

в value объект прокидывай а не массив

[Boris007]

szQocks, пробовал, тоже выдает ошибку
В ответе ниже описал ситуацию

[szQocks]

Boris007, value={{currentUser, setCurrentUser}}

[Boris007]

szQocks, первая ошибка ушла, но вторая осталась

const [currentUser, setCurrentUser] = useContext(AuthContext)

Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
const currentUser: any

const {currentUser, setCurrentUser} = useContext(AuthContext)

Property 'currentUser' does not exist on type '{}'.ts(2339)
const currentUser: any

Answer 1

[HealSpirit]

typescript используете?
Если создаете контекст как объект, то и передавать и использовать нужно как объект:

export const AuthContext = createContext({})

<AuthContext.Provider value={{currentUser, setCurrentUser}}>  // тут нельзя использовать квадратные скобки при передаче значения

const {currentUser, setCurrentUser} = useContext(AuthContext) // тут нельзя использовать квадратные скобки при деструктуризации

А если как массив

export const AuthContext = createContext([])

<AuthContext.Provider value={[currentUser, setCurrentUser]}>  // тут нельзя использовать фигурные скобки при передаче значения

const [currentUser, setCurrentUser] = useContext(AuthContext) // тут нельзя использовать фигурные скобки при деструктуризации

Например, для массива фиксированной длинный это выглядело бы так

import {
  createContext,
  useContext,
  useState,
  type FC,
  type Dispatch,
  type SetStateAction,
} from "react";

type TAuthContext = [string | null, Dispatch<SetStateAction<string>> | null];

export const AuthContext = createContext<TAuthContext>([null, null]);

export const Form: FC = () => {
  const [currentUser, setCurrentUser] = useContext(AuthContext);

  return <>1</>;
};

export const App: FC = () => {
  const [currentUser, setCurrentUser] = useState<string | null>(null);

  return (
    <>
      <AuthContext.Provider value={[currentUser, setCurrentUser]}>
        <Form />
      </AuthContext.Provider>
    </>
  );
};

Думаю, как сделать в виде объекта, сами разберетесь

Comments

[Boris007]

Спасибо, дело сдвинулось с места.
Подскажите пожалуйста, почему в моих двух попытках все равно ошибки?

Сделал, как у вас

import { createContext, Dispatch, SetStateAction } from 'react'
export const AuthContext = createContext<[string | null, Dispatch<SetStateAction<string>> | null]>([null, null])

Но setCurrentUserвыдает ошибку

export function App() {
    const [currentUser, setCurrentUser] = useState<string | null>(null)
    return <>
    <AuthContext.Provider value={[currentUser, setCurrentUser]}>
    </AuthContext.Provider>
    </>
}

Type 'Dispatch<SetStateAction<string | null>>' is not assignable to type 'Dispatch<SetStateAction<string>>'.
  Type 'SetStateAction<string>' is not assignable to type 'SetStateAction<string | null>'.
    Type '(prevState: string) => string' is not assignable to type 'SetStateAction<string | null>'.
      Type '(prevState: string) => string' is not assignable to type '(prevState: string | null) => string | null'.
        Types of parameters 'prevState' and 'prevState' are incompatible.
          Type 'string | null' is not assignable to type 'string'.
            Type 'null' is not assignable to type 'string'

Попытался упростить

import { createContext, Dispatch, SetStateAction } from 'react'
export const AuthContext = createContext<[string, Dispatch<SetStateAction<string>>]>(['', ''])

Но тут выдало ошибку

Type 'string' is not assignable to type 'Dispatch<SetStateAction<string>>'.

[HealSpirit]

упрощать думаю не стоит, т.к вторым элементом массива надо будет передавать заглушку-функцию, а не пустую строку.
Если включен strict-mode typescript'a (или в какой-то из его составляющих), то тип надо так исправить

type TAuthContext = [string | null, Dispatch<SetStateAction<string | null>> | null];

[HealSpirit]

если честно, вроде как объект в большинстве случаев используют (не надо следить, в каком порядке достаются значения)

[Boris007]

HealSpirit,
export const AuthContext = createContext<[string | null, Dispatch> | null]>([null, null])

const [currentUser, setCurrentUser] = useState<string | null>(null)
<AuthContext.Provider value={[currentUser, setCurrentUser]}>

На этой строке у меня в тот раз повисла ошибка, которую я попытался исправить вариантами выше
setCurrentUser('data.token')

Она здесь снова, хотя в типах у нас nullили string, но все равно ругается

Cannot invoke an object which is possibly 'null'.ts(2721)
const setCurrentUser: React.Dispatch<React.SetStateAction<string | null>> | null

[HealSpirit]

Boris007, нужно добавлять проверки на существование функции
Или

if (setCurrentUser) {
   setCurrentUser("some string")
}

Или
setCurrentUser?.("some string")

[HealSpirit]

Boris007, я для тренировки переписал бы на использование объекта. Если добавится ещё несколько значений/функций в контекст, то вам нужно будет строго следить за порядком извлечения. С объектом такой проблемы не будет

Answer 2

[deleo99]

import { useState } from 'react'
import { Form } from './app.tsx'
import { AuthContext } from './store/context'

export function App() {
    const [currentUser, setCurrentUser] = useState(null)
    return <>
    <AuthContext.Provider value={currentUser, setCurrentUser}> // тут объект толкай, а не массив
        <Form />
    </AuthContext.Provider>
    </>
}

Comments

[Boris007]

export function App() {
    const [currentUser, setCurrentUser] = useState(null)
    return <>
    <AuthContext.Provider value={currentUser, setCurrentUser}>
        <Header />
        <Form />
    </AuthContext.Provider>
    </>
}

Строка

<AuthContext.Provider value={currentUser, setCurrentUser}>

выдает ошибку

JSX expressions may not use the comma operator. Did you mean to write an array?ts(18007)
const setCurrentUser: React.Dispatch<React.SetStateAction<null>>

А в файле формы

export function Form() {
  const [currentUser, setCurrentUser] = useContext(AuthContext)
}

выдает ошибку

Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
'setCurrentUser' is declared but its value is never read.ts(6133)
const setCurrentUser: any