TypeError: Cannot read property 'alerts' of undefined

Question

我正在尝试读取 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 来管理状态和其他生命周期内容。

所有与代码相关的文件都放在'context'下一个名为'alert'的目录中。

以下是其他文件： 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

我认为问题出在这条路径 import AlertContext from "../context/alert/alertContext"; 仔细检查路径我认为你错过了另一个../在那里

Answer 2

谢谢大家的建议。

@Vencovsky 预测 <AlertState> 应该是 parent 时是正确的。

我在 App.js 文件中遗漏了这个。

我的 App.js 中有不同的组件作为 <Route> 的一部分，我在这些组件中使用过。

现在，一切正常。

TypeError: Cannot read property 'alerts' of undefined

TypeError: Cannot read property 'alerts' of undefined

reactjs

react-context