Блог

По какой-то причине я не могу использовать перехват useContext.

Ссылка на репозиторий для структуры каталога: URL-адрес РЕПО

Ошибка:

Необработанная ошибка времени выполнения

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

1. Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила использования перехватов
3. У вас может быть более одной копии React в одном приложении

Мой код:

контекст :

 import { createContext, useReducer } from 'react'
export const DataContext = createContext();

const DataProvider = ({ intialState, reducer, children }) => {
    <DataContext.Provider value={useReducer(reducer, intialState)}>
        {children}
    </DataContext.Provider >
}

export default DataProvider;
  

редуктор:

 import { types } from './types';

export const initialState = {
    name: '',
    room: ''
}

const reducer = (state, action) => {
    console.log("Calling action", action);
    switch (action.type) {
        case types.SET_NAME:
            return { ...state, name: action.name }
        case types.SET_ROOM:
            return { ...state, name: action.room }
        default:
            return state;
    }
}

  

Основной компонент, вызывающий проблему :

 import { useContext } from 'react';
import { input } from '../hooks/input';
import Link from 'next/link';
import { DataContext } from '../context/DataProvider';
import { types } from '../reducers/types';

const Join = () => {
    const [name, setName] = input('');
    const [room, setRoom] = input('');

    const submit = () => {
        console.log('FORM');
        const [state, dispatch] = useContext(DataContext);
        dispatch({
            type: types.SET_NAME,
            name
        });
        dispatch({
            type: types.SET_ROOM,
            room
        })
    }
    return (
        <div>
            <h1>Join</h1>

            <input onChange={(e) => setName(e)} placeholder="name" />
            <input onChange={(e) => setRoom(e)} placeholder="room" />
            <Link href="/chat">
                <button type="submit" onClick={() => submit()}>Submit</button>
            </Link>

        </div>
    )
}

export default Join;
  

Вы можете использовать перехваты только в теле функционального компонента. Вы не можете использовать их в функции обратного вызова. Поэтому переместите использование useContext за пределы submit:

 const [state, dispatch] = useContext(DataContext);
const submit = () => {
  console.log("FORM");
  dispatch({
    type: types.SET_NAME,
    name,
  });
  dispatch({
    type: types.SET_ROOM,
    room,
  });
};