10

我尝试导入聊天机器人上下文以访问当前正在编辑的聊天机器人，但出了点问题。你有什么想法可能是这里的问题吗？

太感谢了！

这是错误消息： 在此处输入图像描述

这是我的 chatstate.js 的摘录：

    // import packages
    import React, { useReducer, useContext } from "react";
    import axios from "axios";

    // import local dependencies
    import AuthContext from "../../Context/Auth/authContext";
    import ChatbotContext from "../../Context/Chatbot/chatbotContext";
    import chatReducer from "./chatReducer";
    import ChatContext from "./chatContext";
    import { ADD_INPUT_TO_CHAT, SESSION_ID_CREATED } from "./chatTypes";

    const ChatState = props => {
      // get access to auth token
      const authContext = useContext(AuthContext);
      const { token } = authContext;

      // get access to current chatbot in edit
      const chatbotContext = useContext(ChatbotContext);
      const { currentChatbotInEdit } = chatbotContext;

这是我的 ChatbotState.js 的摘录：

// import packages
import React, { useReducer, useContext } from 'react';
import axios from 'axios';

// import local dependencies
import AuthContext from '../Auth/authContext';
import ChatbotContext from './chatbotContext';
import chatbotReducer from './chatbotReducer';
import {
  SUCCESSFUL_CHATBOT_FROM_USER_FETCH,
  NEW_QUIZBOT_CREATED
} from './chatbotTypes';

const ChatbotState = props => {
  // 1 - Get access to auth token
  const authContext = useContext(AuthContext);
  const { token } = authContext;

  // 2 - Create initial chatbot state
  const initialChatbotState = {
    userChatbots: [],
    currentChatbotInEdit: null
  };

  // 3 - Get access to the state object and the dispatch function
  const [state, dispatch] = useReducer(chatbotReducer, initialChatbotState);
4

4 回答 4

16

您可能没有为您的根组件提供上下文提供程序（如您的情况下的 AuthContextProvider ，如果有的话），我的意思是您的 app.js 或 index.js 取决于您打算服务的组件数量

假设您正在为所有组件提供服务，那么您可以使用您的 index.js，就像我下面的内容一样；

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AuthContextProvider from './context/AuthContext';

ReactDOM.render(
  <React.StrictMode>
   <AuthContextProvider>
     <App />
   </AuthContextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

于 2020-05-22T15:58:08.490 回答
12

我遇到过同样的问题。也许这会对你有所帮助。

在我的 ContextFile 中，我有：

...
export const AuthContext = createContext();
...
export default AuthContextProvider;

在我使用上下文的文件中，我这样做了：

import AuthContext from "./context/AuthContext";

因此，我没有导入“AuthContext”，而是导入了默认的“AuthContextProvider”。

尝试将 {} 放在这一行：

import { ChatbotContext } from "../../Context/Chatbot/chatbotContext";
于 2020-05-09T05:44:48.883 回答
3

我有同样的问题。当我创建上下文时，我没有给出任何默认值，这不是必须的，但这就是造成问题的原因。如果我通过 null 或 undefined 问题仍然存在。

解决它的是传递一个空值，如下所示：

const MyContext = createContext("");
于 2021-08-29T15:26:44.710 回答
1

我有同样的问题，我解决了它在 index.js 级别导入提供程序

ReactDOM.render(
  <React.StrictMode>
    <AppContextProvider providerInitState={movie}>
      <App />
    </AppContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

于 2021-10-09T14:19:47.560 回答