TypeError: Не удается прочитать свойство 'alert' of undefined

Question

Я пытаюсь прочитать свойство alerts для свойства alertContext, когда получаю:

TypeError: Cannot read property 'alerts' of undefined
Alerts
D:/connection/client/src/layouts/Alerts.js:6
  3 | 
  4 | const Alerts = () => {
  5 |   const alertContext = useContext(AlertContext);
> 6 |   return (
  7 |     alertContext.alerts.length > 0 &&
  8 |     alertContext.alerts.map(alert => (
  9 |       <div key={alert.id} className={`alert alert-${alert.type}`}>

Мой Alerts.js файл, имеющий проблему:

import React, { useContext } from "react";
import AlertContext from "../context/alert/alertContext";

const Alerts = () => {
  const alertContext = useContext(AlertContext);
  return (
    alertContext.alerts.length > 0 &&
    alertContext.alerts.map(alert => (
      <div key={alert.id} className={`alert alert-${alert.type}`}>
        <i className='fas fa-info-circle' />
        {alert.msg}
      </div>
    ))
  );
};

export default Alerts;

Я пытался использовать HOOKS и контекстный API для управления состояниями и другими вещами жизненного цикла.

все файлы, относящиеся к коду, помещаются в каталог с именем «alert» в разделе «context».

Вот другие файлы: alertContext.js

import { createContext } from "react";

const alertContext = createContext();
export default alertContext;

AlertState.js

 import React, { useReducer } from "react";
    import uuid from "uuid";

    import AlertContext from "./alertContext.js";
    import alertReducer from "./alertReducer.js";

    import { SET_ALERT, REMOVE_ALERT } from "../types.js";

    const AlertState = props => {
      const initialState = [];

      const [state, dispatch] = useReducer(alertReducer, initialState);

      // SetAlert
      const setAlert = (msg, type, timeout = 5000) => {
        const id = uuid.v4();
        dispatch({
          type: SET_ALERT,
          payload: { msg, type, id }
        });

        setTimeout(() => dispatch({ type: REMOVE_ALERT, payload: id }), 5000);
      };

      return (
        <AlertContext.Provider
          value={{
            // Initial State
            alerts: state,
            setAlert
          }}
        >
          {props.children}
        </AlertContext.Provider>
      );
    };

    export default AlertState;



**alertReducer.js**

    import { SET_ALERT, REMOVE_ALERT } from "../types.js";

    export default (state, action) => {
      switch (action.type) {
        case SET_ALERT: {
          return [...state, action.payload];
        }
        case REMOVE_ALERT: {
          return state.filter(alert => alert.id !== action.payload);
        }
        default:
          return state;
      }
    };

Answer 1

Спасибо всем за ваши предложения.

@ Венцовский был прав, когда предсказывал, что <AlertState> должен быть родителем.

Я пропустил это в моем App.js file.

У меня были разные компоненты как часть <Route> в моем App.js, и я использовал внутри этих компонентов.

Теперь все работает нормально.

Answer 2

Я думаю, что проблема в этом пути импорта AlertContext из "../context/alert/alertContext";дважды проверьте путь, я думаю, что вы пропустили еще один ../ там